/*
 * global.css — SINGLE shared stylesheet for all public pages of SibLearn.
 * Generated by consolidating: compact-ui, typography, theme-2026, courses-modern,
 * comments-modern, siblearn-ds, auth-light, header/footer inline styles, and every
 * public page's inline <style> blocks.
 * Shared base rules are global; per-page rules are scoped under body.page-* classes
 * to preserve each page's original appearance without cross-page bleed.
 * Do not add page-specific CSS elsewhere — edit this file only.
 */

/* ===== SHARED BASE (all public pages) ===== */

/* --- compact-ui.css --- */
/**
 * Compact UI Overrides
 * Makes all public pages more compact and information-dense
 * without changing the visual identity or design language.
 * Created: May 2026
 *
 * Strategy: reduce padding, margins, font-sizes, heights by ~15-25%
 * while preserving colors, shadows, border-radius, typography weight.
 */

/* ========================================
   1. HEADER — Compact (5.2rem → 4rem)
   ======================================== */
body {
    padding-top: 4rem !important;
}

.header-inner {
    height: 4rem !important;
}

header .logo img,
header#header .logo img {
    height: 46px !important;
}

/* Nav links tighter */
@media (min-width: 992px) {
    nav a,
    header#header nav a {
        padding: 0.45rem 0.85rem !important;
    }
    nav,
    header#header nav {
        gap: 0.6rem !important;
    }
}

/* Header buttons smaller */
.header-inner .btn,
header#header .btn {
    padding: 0.4rem 1rem !important;
    min-width: 85px !important;
    border-radius: 10px !important;
}

/* Hamburger smaller */
.hamburger {
    width: 42px !important;
    height: 42px !important;
}

/* Sidebar compact */
.sidebar-header {
    padding: 1rem 1.2rem !important;
}
.sidebar-logo img {
    height: 38px !important;
}
.sidebar-nav a {
    padding: 0.7rem 1.2rem !important;
}


/* ========================================
   2. HERO SECTIONS — All pages
   ======================================== */
.hero,
.courses-hero,
.about-hero,
.contact-hero,
.page-header {
    padding: 1.2rem 0 1.5rem !important;
    min-height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    border-radius: 0 0 2rem 2rem !important;
}

.hero h1,
.courses-hero h1,
.about-hero h1,
.contact-hero h1 {
    margin-bottom: 0.5rem !important;
}

.hero .tagline,
.courses-hero .tagline,
.about-hero .tagline,
.hero-content p {
    margin-bottom: 0.8rem !important;
}

.hero-actions {
    margin-top: 1.2rem !important;
    gap: 0.6rem !important;
}

/* Stats in hero */
.stats {
    margin-top: 1.8rem !important;
    gap: 1.2rem !important;
}
.stat {
    padding: 0.7rem 1.1rem !important;
    min-width: 90px !important;
}
.stat-number {
}


/* ========================================
   3. SECTIONS — Global
   ======================================== */
.section {
    padding: 3rem 0 !important;
}

.bg-section {
    padding: 2rem !important;
    margin-bottom: 1.8rem !important;
}

.section-title {
    margin-bottom: 0.8rem;
}

.courses-section .section-title {
    margin-bottom: 1rem;
}

.section-desc {
    margin-bottom: 1.5rem;
    margin-top: 0.8rem;
}

#comments-section .section-title {
    margin-bottom: 0.8rem;
}

#comments-section .section-desc {
    margin-top: 0.8rem;
}

.divider {
    height: 2.5rem !important;
}


/* ========================================
   4. BUTTONS — Globally smaller
   ======================================== */
.btn {
    padding: 0.45rem 1.3rem !important;
    min-height: 38px !important;
}


/* ========================================
   5. COURSE GRID — 4 columns
   ======================================== */
.course-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.4rem !important;
}

@media (max-width: 1200px) {
    .course-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .course-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .course-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ========================================
   6. COURSE CARDS — Compact
   ======================================== */
.course-grid {
    align-items: stretch !important;
}

.course-card {
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
}

.course-card .course-image,
.course-image {
    height: 160px !important;
}

.course-card .course-image {
    border-radius: 18px 18px 0 0 !important;
}

.course-body {
    padding: 1rem !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.course-body h3 {
    min-height: auto !important;
    margin-bottom: 0.5rem !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.course-card .course-description,
.course-item .course-description {
    min-height: auto !important;
    margin-bottom: 0.5rem !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.course-body .course-excerpt {
    -webkit-line-clamp: 2 !important;
    margin-bottom: 0.6rem !important;
}

.course-meta {
    gap: 0.4rem !important;
    padding: 0.6rem 0 !important;
    margin: 0.5rem 0 !important;
}

.course-meta span {
    padding: 0.2rem 0.5rem !important;
}

.course-footer {
    padding: 0.6rem 0 0 !important;
    margin-top: auto !important;
    min-height: auto !important;
}

.course-price {
    min-height: auto !important;
}

.course-price .current-price {
}

.course-price .original-price {
}

.course-card .btn-primary {
    padding: 0.65rem 1.2rem !important;
    min-width: 110px !important;
    height: 44px !important;
    border-radius: 10px !important;
}


/* ========================================
   7. CLASS TYPE CARDS (Homepage)
   ======================================== */
.class-types {
    gap: 0.8rem !important;
    width: 100% !important;
    margin: 1rem 0 !important;
}

.class-type-card {
    padding: 0.9rem 1.1rem !important;
}

.class-type-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin-bottom: 0 !important;
}

.class-type-title {
    margin-bottom: 0.15rem !important;
}

.class-type-desc {
    margin-bottom: 0 !important;
}

.class-type-features li {
    display: none !important;
}


/* ========================================
   8. INSTRUCTORS PAGE — Compact
   ======================================== */
.instructors-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 1.4rem !important;
}

.instructor-image {
    height: 150px !important;
}

.instructor-body {
    padding: 1.1rem !important;
}

.instructor-body h3 {
    margin-bottom: 0.4rem !important;
}

.instructor-title {
    margin-bottom: 0.8rem !important;
}

.btn-resume {
    padding: 0.4rem 1rem !important;
}

/* Tabs compact */
.tabs {
    gap: 0.7rem !important;
    margin: 2rem 0 1.8rem !important;
}

.tab {
    padding: 0.6rem 1.5rem !important;
}


/* ========================================
   9. ABOUT US PAGE — Compact
   ======================================== */
.about-container {
    margin-top: 1.5rem !important;
}

.about-text {
    padding: 1.8rem 1.6rem !important;
}

.about-text h3 {
}

.about-text p {
}

.benefits-grid {
    gap: 1.2rem !important;
}

.benefit-card {
    padding: 1.2rem !important;
}

.benefit-icon {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 0.8rem !important;
}

.benefit-card h3 {
}

.courses-grid {
    gap: 1.6rem !important;
}


/* ========================================
   11. CONTACT US PAGE — Compact
   ======================================== */
.contact-info-grid {
    gap: 0.8rem !important;
    margin: 1.5rem 0 !important;
}

.contact-card {
    padding: 1rem !important;
}

.contact-icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 0.6rem !important;
}

.contact-card h3 {
    margin-bottom: 0.25rem !important;
}

.contact-card p,
.contact-card a {
}

.ticket-section {
    padding: 1.8rem !important;
    margin: 2rem 0 !important;
}

.ticket-icon {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 1rem !important;
}

.ticket-section h3 {
}

/* FAQ section compact */
.faq-section {
    margin: 2rem 0 !important;
}

.acc-header {
    padding: 1.1rem 1.5rem !important;
}

.acc-header h2 {
}

.acc-body {
    padding: 1.5rem !important;
}


/* ========================================
   12. FEATURES GRID (Courses page)
   ======================================== */
.features-grid {
    gap: 1.4rem !important;
    margin-top: 1.5rem !important;
}

.feature-item {
    padding: 1.5rem 1.2rem !important;
    border-radius: 16px !important;
}

.feature-icon {
    width: 55px !important;
    height: 55px !important;
    margin-bottom: 0.9rem !important;
}

.feature-icon i {
}

.feature-item h3 {
    margin-bottom: 0.5rem !important;
}

.feature-item p {
}


/* ========================================
   13. COMMENTS — Compact
   ======================================== */
.comments-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 1.2rem !important;
}

.comment {
    padding: 1.4rem !important;
}

.comment-text {
    margin-bottom: 1rem !important;
}

.comment-form {
    padding: 1.6rem !important;
    margin-top: 1.2rem !important;
}


/* ========================================
   14. COOPERATE SECTION (Instructors page)
   ======================================== */
#cooperate {
    margin: 3.5rem 0 !important;
    padding: 2.5rem 1.5rem !important;
}

#cooperate h2 {
    margin-bottom: 0.8rem !important;
}

#cooperate p {
    margin-bottom: 1.5rem !important;
}


/* ========================================
   15. FOOTER — Compact
   ======================================== */
.footer-galaxy {
    padding: 2rem 0 1rem !important;
    margin-top: 2rem !important;
}

.footer-grid {
    gap: 1.5rem !important;
}

@media (min-width: 992px) {
    .footer-grid {
        gap: 2rem !important;
    }
}

.footer-col h4 {
    margin-bottom: 0.8rem !important;
    padding-bottom: 0.4rem !important;
}

.footer-logo img {
    height: 46px !important;
}

.slogan {
    margin-top: 0.5rem !important;
}

.footer-col ul {
    gap: 0.45rem !important;
}

.footer-col ul a {
    padding: 0.25rem 0 !important;
}

.contact-item {
    margin-bottom: 0.5rem !important;
    gap: 0.5rem !important;
}

.social-networks {
    margin-top: 1rem !important;
    gap: 0.5rem !important;
}

.social-icon {
    width: 38px !important;
    height: 38px !important;
}

.social-icon img {
    width: 22px !important;
    height: 22px !important;
}

.newsletter-form input {
    padding: 0.6rem 0.9rem !important;
}

.newsletter-form button {
    padding: 0 0.9rem !important;
}

.footer-bottom {
    margin-top: 1.5rem !important;
    padding-top: 1rem !important;
}


/* ========================================
   16. PAGINATION — Compact
   ======================================== */
.pagination {
    gap: 0.4rem !important;
    margin-top: 2rem !important;
}

.pagination a {
    min-width: 40px !important;
    height: 40px !important;
}


/* ========================================
   17. RESPONSIVE OVERRIDES
   ======================================== */
@media (max-width: 992px) {
    .hero h1,
    .courses-hero h1,
    .about-hero h1,
    .contact-hero h1 {
    }
    
    .section-title {
    }
    
    .class-types {
        flex-direction: column !important;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 3.5rem !important;
    }
    
    .header-inner {
        height: 3.5rem !important;
    }
    
    header .logo img,
    header#header .logo img {
        height: 38px !important;
    }
    
    .hero,
    .courses-hero,
    .about-hero,
    .contact-hero {
        padding: 1rem 0 1.3rem !important;
        min-height: auto !important;
        margin-bottom: 1.2rem !important;
    }
    
    .hero h1,
    .courses-hero h1,
    .about-hero h1 {
    }
    
    .section {
        padding: 2rem 0 !important;
    }
    
    .section-title {
    }
    
    .class-types {
        max-width: 100% !important;
    }
    
    .class-type-card {
        padding: 0.8rem 1rem !important;
    }
    
    .footer-galaxy {
        padding: 1.5rem 0 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .hero h1,
    .courses-hero h1,
    .about-hero h1 {
    }
    
    .section {
        padding: 1.5rem 0 !important;
    }
    
    .bg-section {
        padding: 1.4rem !important;
    }
    
    .btn {
        padding: 0.4rem 1rem !important;
    }
}

/* ── Why SibLearn Section ─────────────────────────── */
.why-siblearn-section {
    padding: 3rem 0 2.5rem;
}

.why-siblearn-section .section-title {
    text-align: center;
    margin-bottom: 0.8rem !important;
}

.why-subtitle {
    text-align: center;
    color: var(--text-muted, #6b7280);
    margin-top: 0.8rem;
    margin-bottom: 2rem;
}

.why-subtitle strong {
    color: var(--c3, #7209b7);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    max-width: 860px;
    margin: 0 auto;
}

.why-card {
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 14px;
    background: rgba(114, 9, 183, 0.03);
    border: 1px solid rgba(114, 9, 183, 0.08);
    transition: all 0.3s ease;
}

.why-card:hover {
    background: rgba(114, 9, 183, 0.07);
    border-color: rgba(114, 9, 183, 0.18);
    transform: translateY(-3px);
}

.why-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--c1, #f72585), var(--c3, #7209b7));
    color: #fff;
}

.why-card h4 {
    color: var(--text-dark, #1f2937);
    margin: 0 0 0.3rem;
}

.why-card p {
    color: var(--text-muted, #6b7280);
    margin: 0;
}

.why-cta {
    text-align: center;
    margin-top: 1.5rem;
}

.why-btn {
    padding: 0.45rem 1.4rem !important;
    border-radius: 10px !important;
    gap: 0.4rem;
    display: inline-flex;
    align-items: center;
}

.why-btn i {
    transition: transform 0.2s ease;
}

.why-btn:hover i {
    transform: translateX(-3px);
}

@media (max-width: 768px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
    .why-card {
        padding: 1.2rem 0.8rem;
    }
}

@media (max-width: 480px) {
    .why-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }
    .why-icon {
        width: 40px;
        height: 40px;
    }
    .why-card h4 {
    }
    .why-card p {
    }
}

/* --- typography.css --- */
/* ==========================================================================
   SibLearn — Unified Typography System
   Fluid, responsive, RTL-friendly. Loaded on every public page.
   Loaded AFTER compact-ui.css so it owns final word on type.
   ========================================================================== */

:root {
    /* Type family — single source of truth */
    --font-sans: 'Vazirmatn', 'Estedad', 'Tahoma', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Fluid type scale (clamp(min, preferred, max)) ----------------------- */
    /* H1 — hero/page title */
    --fs-h1: clamp(1.25rem,   1.05rem + 0.9vw, 1.625rem);    /* 20 → 26px */
    --fs-h2: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);    /* 17 → 22px */
    --fs-h3: clamp(0.9375rem, 0.88rem + 0.35vw, 1.125rem);   /* 15 → 18px */
    --fs-h4: clamp(0.9rem,    0.86rem + 0.2vw, 1.0625rem);   /* 14.4 → 17px */
    --fs-h5: clamp(0.875rem,  0.85rem + 0.15vw, 0.9375rem);  /* 14 → 15px */
    --fs-h6: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);     /* 13 → 14px */

    /* Body */
    --fs-body:  clamp(0.9375rem, 0.88rem + 0.25vw, 1rem);  /* 15 → 16px */
    --fs-lead:  clamp(1rem, 0.95rem + 0.3vw, 1.125rem);    /* 16 → 18px subtitle/intro */
    --fs-small: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem); /* 13 → 14px */
    --fs-xs:    clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);   /* 12 → 13px */

    /* Component-specific */
    --fs-btn:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* 14 → 15px */
    --fs-nav:   clamp(0.9375rem, 0.92rem + 0.1vw, 0.9375rem); /* ~15px */
    --fs-input: var(--fs-body);
    --fs-label: clamp(0.8125rem, 0.79rem + 0.15vw, 0.9375rem);/* 13 → 15px */
    --fs-table: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* 14 → 15px */
    --fs-table-th: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);

    /* Weights — single canonical scale */
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold:600;
    --fw-bold:    700;
    --fw-heavy:   800;

    /* Line heights */
    --lh-tight:   1.25;
    --lh-snug:    1.4;
    --lh-normal:  1.6;
    --lh-relaxed: 1.8;

    /* Letter spacing — minor RTL tuning */
    --ls-tight: -0.005em;
    --ls-normal: 0;
}

/* Base ------------------------------------------------------------------- */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-body) !important;
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Inherit family across every element so legacy CSS can't drift */
* {
    font-family: var(--font-sans);
}

/* Headings --------------------------------------------------------------- */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--font-sans) !important;
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    margin: 0 0 0.5em;
    color: inherit;
}

h1, .h1 { font-size: var(--fs-h1) !important; font-weight: var(--fw-heavy); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2) !important; font-weight: var(--fw-bold); }
h3, .h3 { font-size: var(--fs-h3) !important; font-weight: var(--fw-bold); }
h4, .h4 { font-size: var(--fs-h4) !important; font-weight: var(--fw-semibold); }
h5, .h5 { font-size: var(--fs-h5) !important; font-weight: var(--fw-semibold); }
h6, .h6 { font-size: var(--fs-h6) !important; font-weight: var(--fw-semibold); }

/* Common section title patterns — normalize over-sized hero headers */
.section-title,
.page-title,
.hero-title,
.about-hero h1,
.contact-hero h1,
.courses-hero h1,
.instructors-hero h1 {
    font-size: var(--fs-h1) !important;
    font-weight: var(--fw-heavy);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

.section-subtitle,
.page-subtitle,
.hero-subtitle,
.lead {
    font-size: var(--fs-lead) !important;
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: inherit;
    opacity: 0.85;
}

/* Paragraphs & body copy ------------------------------------------------- */
p {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    margin: 0 0 1em;
}

p:last-child { margin-bottom: 0; }

small,
.small,
.text-small,
.text-muted {
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
}

.text-xs { font-size: var(--fs-xs); line-height: var(--lh-normal); }

/* Links ------------------------------------------------------------------ */
a {
    font-weight: inherit;
    color: inherit;
}

strong, b { font-weight: var(--fw-bold); }
em, i    { font-style: italic; }

/* Lists ------------------------------------------------------------------ */
ul, ol {
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
}

li { margin-bottom: 0.35em; }
li:last-child { margin-bottom: 0; }

/* Navigation ------------------------------------------------------------- */
nav, .nav, .navbar, .menu {
    font-size: var(--fs-nav);
    font-weight: var(--fw-semibold);
}

nav a, .nav a, .navbar a, .menu a {
    font-size: var(--fs-nav);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}

/* Buttons ---------------------------------------------------------------- */
.btn, button, .button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-btn) !important;
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    letter-spacing: var(--ls-normal);
}

.btn-sm, button.sm { font-size: var(--fs-small) !important; }
.btn-lg, button.lg { font-size: var(--fs-lead) !important; }

/* Forms ------------------------------------------------------------------ */
label, .form-label {
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    margin-bottom: 0.4em;
    display: inline-block;
}

input, select, textarea {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-input) !important;
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
}

::placeholder {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    opacity: 0.55;
}

.form-help, .form-hint, .help-text {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    font-weight: var(--fw-regular);
}

/* Cards ------------------------------------------------------------------ */
.card-title,
.course-card .title,
.course-card-title,
.blog-card-title,
.instructor-card-title {
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
}

.card-subtitle,
.card-meta {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
}

.card-text,
.card-body p,
.card-description {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
}

/* Tables ----------------------------------------------------------------- */
table {
    font-size: var(--fs-table);
    font-weight: var(--fw-regular);
}

th {
    font-size: var(--fs-table-th);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: 0.01em;
}

td {
    font-size: var(--fs-table);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
}

/* Badges / pills / tags -------------------------------------------------- */
.badge, .tag, .pill, .chip {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* Breadcrumbs ------------------------------------------------------------ */
.breadcrumb, .breadcrumbs {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
}

/* Blockquote ------------------------------------------------------------- */
blockquote {
    font-size: var(--fs-lead);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    font-style: italic;
}

/* Code (rare on public pages, still normalize) --------------------------- */
code, pre, kbd, samp {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.9em;
}

/* RTL spacing tweaks ----------------------------------------------------- */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    word-spacing: 0.02em;
}

/* Mobile fine-tune ------------------------------------------------------- */
@media (max-width: 480px) {
    body { line-height: 1.65; }
    p    { line-height: 1.75; }
}


/* ==========================================================================
   Global Text Justification (RTL-friendly)
   متن همه‌ی صفحات به‌صورت پیش‌فرض جاستیفای می‌شود.
   ========================================================================== */
p,
li,
dd,
blockquote,
article,
.section-desc,
.hero .tagline,
.faq-answer p,
.faq-answer-inner p,
.comment-body,
.comment-text,
.about-text,
.about-text p,
.course-description,
.course-desc,
.blog-content,
.blog-post-content,
.post-content,
.page-content,
.content-area,
.text-content {
    text-align: right;
    word-break: normal;
    overflow-wrap: break-word;
}

/* استثناها */
h1, h2, h3, h4, h5, h6,
.btn, button,
nav, .nav, .navbar, .menu,
label, input, textarea, select,
.badge, .tag, .chip,
.stat, .stat-number, .stat-label,
.section-title,
.hero h1,
.breadcrumb, .breadcrumbs,
.alert,
table th, table td,
.comment-date, .comment-user-name,
.acc-header h2,
.faq-q-text,
.footer-bottom,
[class*="icon"] {
    text-align: inherit;
    text-align-last: auto;
    hyphens: manual;
}
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }
.text-left   { text-align: left !important; }

/* --- theme-2026.css --- */
/* ===================================================================== */
/*  SibLearn — Unified Theme 2026                                        */
/*  Site-wide design tokens + component polish (brand-preserving).       */
/*  Loaded LAST on every page (via header.php) so it harmonises every    */
/*  page with the redesigned homepage: softened galaxy palette, premium  */
/*  neutrals, unified buttons / inputs / focus states.                   */
/*  This file overrides design TOKENS only + a few safe global controls; */
/*  it never touches page-specific layout.                               */
/* ===================================================================== */

:root{
    /* ---- Softened galaxy spectrum (legacy var names preserved) ------- */
    --c1:#ec4899; --c2:#d6409f; --c3:#7c3aed; --c4:#6d28d9; --c5:#5b21b6;
    --c6:#5145cd; --c7:#4f46e5; --c8:#4f6ef7; --c9:#5b9df9; --c10:#38bdf8;

    /* ---- Header / global semantic tokens ----------------------------- */
    --primary:#6d28d9; --primary-dark:#5b21b6; --accent:#ec4899;
    --bg:#ffffff; --text:#1c1830; --gray-dark:#1c1830; --gray-light:#f6f4fd; --white:#ffffff;
    --shadow:0 14px 36px -16px rgba(45,30,90,.22);

    /* ---- style.css "galaxy" tokens ----------------------------------- */
    --primary-galaxy:#6d28d9; --secondary-galaxy:#ec4899; --accent-galaxy:#4f6ef7;
    --gradient-main:linear-gradient(135deg,#7c3aed 0%,#a855f7 45%,#ec4899 100%);
    --gradient-soft:linear-gradient(135deg,rgba(124,58,237,.08),rgba(236,72,153,.08));
    --gradient-bg:linear-gradient(-45deg,#6d28d9,#a855f7,#ec4899,#4f6ef7,#38bdf8);
    --bg-light-galaxy:#fbfaff; --bg-white-galaxy:#ffffff;
    --text-dark:#1c1830; --text-muted:#6c6788;
    --border-color:rgba(28,24,48,.10); --border-soft:rgba(28,24,48,.07);
    --shadow-glow:0 0 30px rgba(124,58,237,.22);

    /* ---- auth-light.css / auth.css tokens ---------------------------- */
    --text-primary:#1c1830; --text-secondary:#5b5670; --border-light:rgba(28,24,48,.10);
    --gray:#6c6788; --light-gray:rgba(28,24,48,.10);

    /* ---- New premium semantic tokens (used by homepage + components) - */
    --brand:#6d28d9; --brand-strong:#5b21b6; --indigo:#4f6ef7;
    --ink:#1c1830; --ink-2:#454063; --muted:#6c6788;
    --page:#fbfaff; --surface:#ffffff; --surface-2:#f6f4fd; --surface-3:#f1eefb;
    --line:rgba(28,24,48,.09); --line-2:rgba(28,24,48,.06);
    --grad-brand:linear-gradient(135deg,#7c3aed 0%,#a855f7 45%,#ec4899 100%);
    --grad-text:linear-gradient(90deg,#ec4899,#7c3aed 55%,#4f6ef7);
    --ring:0 0 0 4px rgba(124,58,237,.16);
    --sh-xs:0 1px 2px rgba(28,24,48,.05);
    --sh-sm:0 4px 14px -6px rgba(45,30,90,.16);
    --sh-md:0 14px 36px -16px rgba(45,30,90,.24);
    --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:24px; --r-xl:30px;
    --space-section:clamp(3.25rem,6vw,5.5rem);
    --ease:cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"],.dark-theme{
    --bg:#17142a; --text:#eceaf6; --gray-dark:#eceaf6; --gray-light:#0f0d1a; --white:#17142a;
    --bg-light-galaxy:#0f0d1a; --bg-white-galaxy:#17142a;
    --text-dark:#eceaf6; --text-muted:#9b96b6;
    --border-color:rgba(255,255,255,.10); --border-soft:rgba(255,255,255,.07);
    --text-primary:#eceaf6; --text-secondary:#c4c0d8;
    --ink:#eceaf6; --ink-2:#c4c0d8; --muted:#9b96b6;
    --page:#0f0d1a; --surface:#17142a; --surface-2:#1d1936; --surface-3:#221d40;
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
}

/* =====================================================================
   THEME TOGGLE — attractive light/dark switch (public header + sidebar)
   ===================================================================== */
/* smooth cross-theme transition for surfaces/text */
body, header#header, .sidebar, .card, .btn, .hero, footer,
[class*="surface"], [class*="hero"] {
    transition: background-color .45s var(--ease, ease), color .45s var(--ease, ease), border-color .45s var(--ease, ease);
}

/* --- Circular icon button (desktop header) --- */
.theme-toggle {
    --tt-size: 40px;
    position: relative;
    flex: 0 0 auto;
    width: var(--tt-size);
    height: var(--tt-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    background:
        linear-gradient(var(--surface, var(--white)), var(--surface, var(--white))) padding-box,
        linear-gradient(135deg, var(--accent, #ec4899), var(--primary, #6d28d9)) border-box;
    box-shadow: 0 6px 18px -9px rgba(124, 58, 237, .55);
    transition: transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle::before {
    content: "";
    position: absolute;
    inset: -45%;
    background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, .4), transparent 62%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.theme-toggle:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 12px 26px -9px rgba(124, 58, 237, .65); }
.theme-toggle:hover::before { opacity: 1; }
.theme-toggle:active { transform: scale(.93); }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(124, 58, 237, .28); }

.theme-toggle i {
    position: absolute;
    font-size: 19px;
    line-height: 1;
    transition: transform .5s var(--ease, cubic-bezier(.22,.61,.36,1)), opacity .38s ease;
}
.theme-toggle .theme-ico-sun  { color: #f59e0b; }
.theme-toggle .theme-ico-moon { color: #818cf8; }

/* light mode → sun visible */
.theme-toggle .theme-ico-sun  { transform: rotate(0) scale(1);      opacity: 1; }
.theme-toggle .theme-ico-moon { transform: rotate(-90deg) scale(.4); opacity: 0; }
/* dark mode → moon visible */
[data-theme="dark"] .theme-toggle .theme-ico-sun  { transform: rotate(90deg) scale(.4); opacity: 0; }
[data-theme="dark"] .theme-toggle .theme-ico-moon { transform: rotate(0) scale(1);      opacity: 1; }

/* --- Pill switch row (mobile sidebar) --- */
.theme-toggle-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: calc(100% - 2.4rem);
    margin: .4rem 1.2rem .2rem;
    padding: .7rem .9rem;
    border: 1px solid var(--line, rgba(28,24,48,.09));
    border-radius: 14px;
    background: var(--surface-2, var(--gray-light));
    color: var(--ink, #1c1830);
    cursor: pointer;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    transition: background .3s ease, border-color .3s ease;
}
.theme-toggle-row:hover { border-color: var(--primary, #6d28d9); }
.theme-toggle-row .ttr-ico {
    position: relative;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle-row .ttr-ico i {
    position: absolute;
    font-size: 20px;
    transition: transform .5s var(--ease, cubic-bezier(.22,.61,.36,1)), opacity .38s ease;
}
.theme-toggle-row .theme-ico-sun  { color: #f59e0b; opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle-row .theme-ico-moon { color: #818cf8; opacity: 0; transform: rotate(-90deg) scale(.4); }
[data-theme="dark"] .theme-toggle-row .theme-ico-sun  { opacity: 0; transform: rotate(90deg) scale(.4); }
[data-theme="dark"] .theme-toggle-row .theme-ico-moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle-row .ttr-label { flex: 1 1 auto; text-align: right; }
[data-theme="dark"] .theme-toggle-row .ttr-label::after { content: " (فعال)"; font-weight: 500; opacity: .6; }
.theme-toggle-row .ttr-switch {
    position: relative;
    width: 46px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--line, rgba(28,24,48,.18));
    transition: background .35s ease;
}
[data-theme="dark"] .theme-toggle-row .ttr-switch {
    background: linear-gradient(135deg, var(--accent, #ec4899), var(--primary, #6d28d9));
}
.theme-toggle-row .ttr-knob {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    transition: transform .35s var(--ease, cubic-bezier(.22,.61,.36,1));
}
[data-theme="dark"] .theme-toggle-row .ttr-knob { transform: translateX(-20px); }

/* --------------------------------------------------------------------- */
/*  Safe global polish — interaction feel shared by all pages            */
/* --------------------------------------------------------------------- */

::selection{ background:rgba(124,58,237,.16); }

/* Accessible focus ring on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r-xs); }

/* Unified body-level call-to-action buttons (navbar keeps its own id-scoped rules) */
.btn-primary{
    background:var(--grad-brand);
    color:#fff;
    border-color:transparent;
    box-shadow:0 10px 24px -12px rgba(124,58,237,.55);
}
.btn-primary:hover{
    background:var(--grad-brand);
    box-shadow:0 16px 30px -14px rgba(124,58,237,.6);
}
.btn-outline{
    color:var(--brand);
    border-color:var(--line);
}
.btn-outline:hover{
    background:var(--surface-2);
    color:var(--brand-strong);
    border-color:rgba(124,58,237,.3);
}

/* Unified form controls */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):focus,
textarea:focus,
select:focus{
    outline:none;
    border-color:var(--brand);
    box-shadow:var(--ring);
}

/* Honor reduced-motion site-wide */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
    [data-aos]{ opacity:1 !important; transform:none !important; }
}

/* --- courses-modern.css (shared component) --- */
/**
 * Modern Course Cards Design
 * سیستم طراحی مدرن برای کارت‌های دوره
 * تاریخ ایجاد: فوریه 2026
 */

:root {
    --c1: #f72585;
    --c2: #b5179e;
    --c3: #7209b7;
    --c4: #560bad;
    --c5: #480ca8;
    --c6: #3a0ca3;
    --c7: #3f37c9;
    --c8: #4361ee;
    --c9: #4895ef;
    --c10: #4cc9f0;

    /* Semantic colors */
    --primary: var(--c3);
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* Spacing based on 8px */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;
}

/* ========== بخش دوره‌ها ========== */
.courses-section {
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(180deg, var(--gray-light) 0%, var(--white) 100%);
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

/* ========== کارت دوره ========== */
.course-card {
    position: relative;
    background: var(--white);
    border-radius: 24px;
    overflow: visible; /* برای نمایش نوار تخفیف */
    box-shadow: 0 8px 30px rgba(131, 56, 236, 0.08);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 1;
    transform: translateY(0);
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
}

/* لینک کلیک‌پذیر کل کارت دوره */
.course-card { cursor: pointer; }
.course-card .course-card-link {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: 24px;
    text-indent: -9999px;
    overflow: hidden;
}
/* فقط دکمه‌ها/لینک‌های تعاملی بالاتر از لایه کلیک کل کارت قرار می‌گیرند */
.course-card .course-body .btn-primary,
.course-card .course-body a:not(.course-card-link) { position: relative; z-index: 6; }
/* نوار تخفیف بدون تغییر جایگاه، فقط بالاتر از لایه کلیک */
.course-card .discount-ribbon { z-index: 6; }

.course-card .course-image {
    position: relative;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
}

/* افکت بوردر گرادیانت */
.course-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, var(--c1), var(--c2), var(--c3), var(--c10));
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.course-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 50px rgba(131, 56, 236, 0.18);
}

.course-card:hover::before {
    opacity: 1;
}

/* ========== تصویر دوره ========== */
.course-image {
    height: 160px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, rgba(67,97,238,0.1), rgba(76,201,240,0.1));
}

/* افکت skeleton برای loading - REMOVED */

/* افکت overlay gradient - حذف شد برای حل مشکل لایه شفاف */
.course-image::after {
    content: none;
}

.course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.course-card:hover .course-image img {
    transform: scale(1.1) rotate(2deg);
}

/* بج سطح دوره - طراحی پریمیوم */
.course-level {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    padding: 3px 9px;
    border-radius: 50px;
    color: white;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    backdrop-filter: blur(15px);
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.2),
        inset 0 1px 2px rgba(255,255,255,0.3);
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.course-level::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 8px currentColor;
    animation: levelPulse 2s infinite;
}

.course-level::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: levelShine 3s infinite;
}

@keyframes levelPulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 0 10px currentColor;
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.3);
        box-shadow: 0 0 15px currentColor;
    }
}

@keyframes levelShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.level-beginner {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.level-intermediate {
    background: linear-gradient(135deg, var(--c8), var(--c9));
    color: white;
}

.level-advanced {
    background: linear-gradient(135deg, var(--c1), var(--c2));
    color: white;
}

/* ========== بدنه کارت ========== */
.course-body {
    padding: var(--spacing-lg);
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* عنوان دوره */
.course-body h3 {
    background: linear-gradient(135deg, var(--c1), var(--c3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.course-card:hover .course-body h3 {
    transform: translateX(-5px);
}

/* استاد دوره */
.course-instructor {
    color: var(--c3);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: linear-gradient(135deg, rgba(131,56,236,0.05), rgba(255,0,110,0.05));
    border-radius: 12px;
    border-right: 3px solid var(--c3);
}

.course-instructor::before {
    content: '●';
    color: var(--c1);
}

/* توضیحات دوره (فقط در کارت لیست دوره‌ها به ۲ خط محدود شود) */
.course-card .course-description,
.course-item .course-description {
    color: #64748b;
    margin-bottom: var(--spacing-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* متادیتای دوره */
.course-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.course-meta-item {
    padding: var(--spacing-sm);
    background: linear-gradient(135deg, rgba(76,201,240,0.08), rgba(67,97,238,0.08));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    color: var(--c3);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.course-card:hover .course-meta-item {
    background: linear-gradient(135deg, rgba(76,201,240,0.15), rgba(67,97,238,0.15));
    border-color: rgba(67,97,238,0.2);
    transform: translateY(-2px);
}

.course-meta-item i {
    color: var(--c8);
    transition: transform 0.3s ease;
}

.course-card:hover .course-meta-item i {
    transform: scale(1.1) rotate(5deg);
}

/* فوتر کارت */
.course-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-sm);
    border-top: 2px solid rgba(131,56,236,0.08);
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

/* قیمت دوره */
.course-price {
    background: linear-gradient(135deg, var(--c1), var(--c3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    flex: 1;
    text-align: left;
}

.course-price small {
    color: #94a3b8;
    -webkit-text-fill-color: #94a3b8;
}

/* قیمت با تخفیف - طراحی مطابق تم برند */
.price-with-discount {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(114, 9, 183, 0.08), rgba(76, 201, 240, 0.08));
    border-radius: 8px;
    border: 1px solid rgba(114, 9, 183, 0.2);
}

.price-group {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.original-price {
    color: #94a3b8;
    text-decoration: line-through;
    opacity: 0.7;
    -webkit-text-fill-color: #94a3b8;
    position: relative;
}

.original-price::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--c1), transparent);
    animation: strikethrough 0.5s ease-out;
}

@keyframes strikethrough {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.discount-price {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.discount-price span {
    background: linear-gradient(135deg, var(--c1), var(--c3), var(--c10));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(114, 9, 183, 0.4));
}

.discount-price small {
    background: linear-gradient(135deg, var(--c1), var(--c3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* نوار تخفیف - بج مدرن و خوش‌فرم */
.discount-ribbon {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 52px;
    padding: 8px 12px 9px;
    background: linear-gradient(135deg, #f72585 0%, #b5179e 55%, #7209b7 100%);
    color: #ffffff;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1;
    z-index: 15;
    text-align: center;
    border-radius: 14px 14px 14px 4px;
    box-shadow:
        0 10px 24px rgba(247, 37, 133, 0.35),
        0 2px 6px rgba(114, 9, 183, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 0 rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    animation: ribbonFloat 3.4s ease-in-out infinite;
    transition: transform .35s ease, box-shadow .35s ease;
}

.discount-ribbon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
    background-size: 220% 100%;
    background-position: 200% 0;
    animation: ribbonShine 3s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.discount-ribbon::after {
    content: 'تخفیف';
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    opacity: 0.95;
    margin-top: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.discount-ribbon span {
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.3px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    background: linear-gradient(180deg, var(--white), #ffe6f1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.course-card:hover .discount-ribbon {
    transform: translateY(-2px) rotate(-3deg) scale(1.04);
    box-shadow:
        0 14px 30px rgba(247, 37, 133, 0.45),
        0 3px 8px rgba(114, 9, 183, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* انیمیشن شناوری ملایم */
@keyframes ribbonFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-3px) rotate(-2deg); }
}

/* درخشش روان */
@keyframes ribbonShine {
    0%        { background-position: 200% 0; }
    55%, 100% { background-position: -120% 0; }
}

/* انیمیشن درخشش برای کارت‌های دارای تخفیف - تم برند */
.course-card.has-discount {
    border: 3px solid transparent;
    background-image: 
        linear-gradient(var(--white), var(--white)),
        linear-gradient(135deg, var(--c1), var(--c3), var(--c8), var(--c10), var(--c1));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100%, 300% 300%;
    animation: brandBorder 4s ease-in-out infinite;
}

.course-card.has-discount:hover {
    box-shadow: 
        0 25px 70px rgba(114, 9, 183, 0.4),
        0 0 40px rgba(76, 201, 240, 0.3),
        inset 0 0 60px rgba(247, 37, 133, 0.05);
    transform: translateY(-15px) scale(1.03);
}

/* انیمیشن border مطابق تم برند */
@keyframes brandBorder {
    0%, 100% {
        background-position: 0%, 0% 50%;
    }
    50% {
        background-position: 0%, 100% 50%;
    }
}

/* افکت درخشش پیشرفته - تم برند */
@keyframes shimmer {
    0% {
        transform: translateX(-100%) rotate(-45deg);
    }
    100% {
        transform: translateX(200%) rotate(-45deg);
    }
}

/* Shimmer effect removed from discounted courses */

/* دکمه جزئیات */
.course-card .btn-primary {
    padding: 0.65rem 1.2rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--c1), var(--c3));
    color: white;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 3px 12px rgba(131, 56, 236, 0.25);
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 110px;
    height: 44px;
    flex-shrink: 0;
    white-space: nowrap;
}

.course-card .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.course-card .btn-primary:hover::before {
    left: 100%;
}

.course-card .btn-primary:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 20px rgba(131, 56, 236, 0.35);
    background: linear-gradient(135deg, var(--c3), var(--c2));
}

/* افکت حرکت آیکون */
.course-card .btn-primary i {
    transition: transform 0.3s ease;
}

.course-card .btn-primary:hover i {
    transform: translateX(-5px);
}

.course-card .btn-primary:active {
    transform: translateY(-1px) scale(1.02);
}

/* ========== پیام عدم وجود دوره ========== */
.no-courses-message {
    grid-column: 1 / -1;
    text-align: center;
    color: #94a3b8;
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(135deg, rgba(131,56,236,0.05), rgba(255,0,110,0.05));
    border-radius: 24px;
    border: 2px dashed rgba(131,56,236,0.2);
}

/* ========== Pagination ========== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-3xl);
    padding: var(--spacing-lg) 0;
}

.pagination a {
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(131,56,236,0.08), rgba(255,0,110,0.08));
    color: var(--c3);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid transparent;
}

.pagination a:hover {
    background: linear-gradient(135deg, var(--c1), var(--c3));
    color: white;
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 8px 20px rgba(131, 56, 236, 0.3);
}

.pagination .active {
    background: linear-gradient(135deg, var(--c1), var(--c3));
    color: white;
    box-shadow: 0 6px 18px rgba(131, 56, 236, 0.35);
    transform: scale(1.05);
    border-color: rgba(255,255,255,0.2);
}

/* ========== Responsive ========== */
@media (max-width: 1200px) {
    .course-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-lg);
    }
}

@media (max-width: 992px) {
    .course-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

@media (max-width: 600px) {
    .course-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .course-image {
        height: 180px;
    }

    .course-body {
        padding: var(--spacing-md);
    }

    .course-body h3 {
        min-height: auto;
    }

    .course-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .courses-section {
        padding: var(--spacing-xl) 0;
    }

    .course-card {
        border-radius: 20px;
    }

    .course-image {
        height: 160px;
    }

    .course-body {
        padding: var(--spacing-md);
    }

    .course-body h3 {
    }

    .course-card .btn-primary {
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .pagination a {
        min-width: 40px;
        height: 40px;
    }
}

/* ========== بهبود دسترسی ========== */
.course-card:focus-within {
    outline: 3px solid var(--c3);
    outline-offset: 2px;
}

.course-card .btn-primary:focus {
    outline: 3px solid var(--c1);
    outline-offset: 2px;
}

/* ========== انیمیشن‌های اضافی ========== */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.course-card.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* --- comments-modern.css (shared component) --- */
/* ===== بخش کامنت‌های مدرن ===== */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    margin-bottom: 2rem;
}

.comment-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(114,9,183,0.06);
    padding: 1.2rem 1.4rem;
    transition: var(--transition);
    border: 1px solid rgba(114,9,183,0.08);
}

.comment-card:hover {
    box-shadow: 0 6px 20px rgba(114,9,183,0.12);
    transform: translateY(-2px);
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.comment-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    background: linear-gradient(var(--white), var(--white)) padding-box,
                linear-gradient(135deg, var(--accent), var(--primary)) border-box;
    flex-shrink: 0;
}

.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-avatar-default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--primary));
    color: #fff;
}

.comment-user-info {
    flex: 1;
}

.comment-user-name {
    color: var(--gray-dark);
    margin-bottom: 0.1rem;
}

.comment-date {
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.comment-date i {
}

.comment-body {
    padding: 0.5rem 0;
    color: var(--text);
    position: relative;
}

.comment-body::before {
    content: '"';
    color: rgba(114,9,183,0.15);
    position: absolute;
    top: -0.6rem;
    right: -0.3rem;
}

.comment-actions {
    display: flex;
    gap: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(114,9,183,0.08);
}

.reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.9rem;
    background: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
}

.reply-btn:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(114,9,183,0.25);
}

.reply-btn i {
}

/* فرم پاسخ */
.reply-form-container {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(114,9,183,0.03), rgba(247,37,133,0.03));
    border-radius: var(--radius-sm);
    border-right: 4px solid var(--primary);
    display: none;
}

.reply-form-container.active {
    display: block;
    animation: slideDown 0.4s ease;
}

.reply-form textarea {
    width: 100%;
    padding: 1rem;
    border: 1.5px solid rgba(114,9,183,0.2);
    border-radius: var(--radius-sm);
    resize: vertical;
    min-height: 100px;
    transition: var(--transition);
}

.reply-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(114,9,183,0.1);
    outline: none;
}

.reply-form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.reply-submit {
    padding: 0.7rem 1.5rem;
    background: linear-gradient(135deg, var(--accent), var(--primary));
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
}

.reply-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(114,9,183,0.3);
}

.reply-cancel {
    padding: 0.7rem 1.5rem;
    background: transparent;
    color: var(--gray-dark);
    border: 1.5px solid #d1d5db;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
}

.reply-cancel:hover {
    background: var(--gray-light);
    border-color: #9ca3af;
}

/* پاسخ‌ها */
.comment-replies {
    margin-top: 0.8rem;
    margin-right: 2.5rem;
    padding-right: 1rem;
    border-right: 2px solid rgba(114,9,183,0.12);
}

.reply-item {
    background: linear-gradient(135deg, rgba(114,9,183,0.02), rgba(247,37,133,0.02));
    padding: 0.8rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.6rem;
    border: 1px solid rgba(114,9,183,0.06);
}

.reply-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.reply-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(114,9,183,0.2);
    flex-shrink: 0;
}

.reply-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reply-avatar-default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c8), var(--c10));
    color: #fff;
}

.reply-user-name {
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-badge {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    padding: 0.1rem 0.45rem;
    border-radius: 50px;
    text-transform: uppercase;
}

.reply-date {
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.reply-body {
    padding-right: 2.2rem;
    color: var(--text);
}

.replies-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    color: var(--primary);
    cursor: pointer;
    transition: var(--transition);
}

.replies-toggle:hover {
    color: var(--accent);
}

.replies-toggle i {
    transition: transform 0.3s ease;
}

.replies-toggle.active i {
    transform: rotate(180deg);
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .comment-replies {
        margin-right: 1rem;
        padding-right: 0.7rem;
    }
    
    .reply-body {
        padding-right: 0;
    }
    
    .comment-avatar {
        width: 32px;
        height: 32px;
    }
    
    .comment-avatar-default {
    }
}

/* --- siblearn-ds.css (shared component) --- */
/* ============================================================
   SibLearn Design System  ·  siblearn-ds.css
   Single source of truth shared by homepage / courses / detail.
   Tokens + premium primitives. Compact, elegant, unified scale.
   Loaded LAST so it harmonizes legacy page styles.
============================================================ */

/* ---- Brand tokens (mirrors homepage home-redesign-2026) ---- */
:root{
    --c1:#ec4899; --c2:#d6409f; --c3:#7c3aed; --c4:#6d28d9; --c5:#5b21b6;
    --c6:#5145cd; --c7:#4f46e5; --c8:#4f6ef7; --c9:#5b9df9; --c10:#38bdf8;

    --brand:#6d28d9; --brand-strong:#5b21b6; --accent:#ec4899; --indigo:#4f6ef7;
    --ink:#1c1830; --ink-2:#454063; --muted:#6c6788;
    --page:#fbfaff; --surface:#ffffff; --surface-2:#f6f4fd; --surface-3:#f1eefb;
    --line:rgba(28,24,48,.09); --line-2:rgba(28,24,48,.06);

    --grad-brand:linear-gradient(135deg,#7c3aed 0%,#a855f7 45%,#ec4899 100%);
    --grad-text:linear-gradient(90deg,#ec4899,#7c3aed 55%,#4f6ef7);
    --ring:0 0 0 4px rgba(124,58,237,.16);

    --sh-xs:0 1px 2px rgba(28,24,48,.05);
    --sh-sm:0 4px 14px -6px rgba(45,30,90,.16);
    --sh-md:0 14px 36px -16px rgba(45,30,90,.24);
    --sh-lg:0 30px 70px -28px rgba(45,30,90,.34);

    --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:24px; --r-xl:30px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --t-fast:.18s var(--ease); --t:.28s var(--ease);
    --space-section:clamp(2rem,3.8vw,3rem);

    /* compact type scale (mirrors home-compact-2026) */
    --fs-h1:clamp(1.45rem,1.1rem+1.5vw,2rem);
    --fs-title:clamp(1.05rem,.95rem+.45vw,1.3rem);
    --fs-sub:.82rem;
    --fs-card-title:.95rem;
    --fs-body:.85rem;
    --fs-small:.8rem;
    --fs-meta:.74rem;
    --fs-btn:.8rem;
}
[data-theme="dark"],.dark-theme,.dark{
    --ink:#eceaf6; --ink-2:#c4c0d8; --muted:#9b96b6;
    --page:#0f0d1a; --surface:#17142a; --surface-2:#1d1936; --surface-3:#221d40;
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
}

/* ---- Base rhythm ---- */
.ds-scope, .ds-scope *{ box-sizing:border-box; }
.ds-scope{ color:var(--ink); }
.ds-scope .container{ max-width:1180px; margin:0 auto; padding-inline:1.25rem; }
::selection{ background:rgba(124,58,237,.16); }

/* ---- Section scaffolding ---- */
.ds-scope .ds-section{ padding:var(--space-section) 0; }
.ds-scope .ds-section-head{ text-align:center; max-width:640px; margin:0 auto 1.6rem; }
.ds-scope .section-title,
.ds-scope .ds-title{
    font-size:var(--fs-title) !important; font-weight:800; line-height:1.4;
    color:var(--ink); margin:0 0 .4rem; letter-spacing:-.01em;
}
.ds-scope .section-desc,
.ds-scope .ds-sub{
    font-size:var(--fs-sub); color:var(--muted); line-height:1.7; margin:0;
}

/* ---- Eyebrow / pill label ---- */
.ds-eyebrow{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.32rem .7rem; border-radius:999px;
    background:var(--surface); border:1px solid var(--line);
    color:var(--ink-2); font-size:var(--fs-meta); font-weight:700;
    box-shadow:var(--sh-xs);
}
.ds-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--grad-brand); }

/* ---- Buttons (one compact scale) ---- */
.ds-scope .btn,
.ds-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
    padding:.55rem 1.15rem; border-radius:999px; cursor:pointer;
    font-family:inherit; font-size:var(--fs-btn) !important; font-weight:700;
    line-height:1; border:1px solid transparent; text-decoration:none;
    transition:transform var(--t-fast),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
    white-space:nowrap;
}
.ds-scope .btn-primary,
.ds-btn-primary{
    background:var(--grad-brand); color:#fff !important; border:none;
    box-shadow:0 10px 24px -12px rgba(124,58,237,.7);
}
.ds-scope .btn-primary:hover,
.ds-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(124,58,237,.8); color:#fff; }
.ds-btn-outline{
    background:var(--surface); color:var(--brand) !important; border:1px solid var(--line);
    box-shadow:var(--sh-xs);
}
.ds-btn-outline:hover{ background:var(--surface-2); color:var(--brand-strong) !important; transform:translateY(-2px); }
.ds-scope .btn:focus-visible,
.ds-btn:focus-visible{ outline:none; box-shadow:var(--ring); }

/* ---- Card primitive ---- */
.ds-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:var(--sh-sm); overflow:hidden;
    transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.ds-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:rgba(124,58,237,.22); }

/* ---- Inputs ---- */
.ds-scope input[type=text],
.ds-scope input[type=email],
.ds-scope input[type=search],
.ds-scope input[type=tel],
.ds-scope textarea,
.ds-input{
    width:100%; padding:.6rem .85rem; font-family:inherit;
    font-size:var(--fs-small); color:var(--ink);
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
    transition:border-color var(--t),box-shadow var(--t);
}
.ds-scope input:focus,
.ds-scope textarea:focus,
.ds-input:focus{ outline:none; border-color:var(--brand); box-shadow:var(--ring); }

/* ---- Badge / chip ---- */
.ds-chip{
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.26rem .6rem; border-radius:999px;
    font-size:var(--fs-meta); font-weight:700; line-height:1;
    background:var(--surface-3); color:var(--brand); border:1px solid var(--line-2);
}

/* ---- Divider ---- */
.ds-divider{ height:1px; border:0; margin:0;
    background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* ---- Skeleton (loading state) ---- */
.ds-skel{ position:relative; overflow:hidden; background:var(--surface-3); border-radius:var(--r-sm); }
.ds-skel::after{ content:''; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    transform:translateX(-100%); animation:dsShimmer 1.4s infinite; }
[data-theme="dark"] .ds-skel::after,.dark-theme .ds-skel::after{
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); }
@keyframes dsShimmer{ to{ transform:translateX(100%); } }

/* ---- Reveal on scroll (used if AOS absent) ---- */
@media (prefers-reduced-motion:reduce){
    .ds-scope *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* --- header.php inline block 1 (full-html nav/theme/layout) --- */

        :root {
            /* پالت رنگ سفارشی - فقط این رنگ‌ها + سفید + مشکی */
            --c1: #f72585;  /* صورتی تند */
            --c2: #b5179e;  /* بنفش صورتی */
            --c3: #7209b7;  /* بنفش تیره */
            --c4: #560bad;  /* بنفش عمیق */
            --c5: #480ca8;  /* بنفش سلطنتی */
            --c6: #3a0ca3;  /* آبی بنفش */
            --c7: #3f37c9;  /* آبی سلطنتی */
            --c8: #4361ee;  /* آبی روشن */
            --c9: #4895ef;  /* آبی آسمانی */
            --c10: #4cc9f0; /* آبی شفاف */
            --white: #ffffff;
            --black: #000000;
            --gray-light: #f8f9fa;
            --gray-dark: #212529;

            /* رنگ اصلی (انتخاب از پالت) */
            --primary: var(--c3);      /* #7209b7 - بنفش تیره برای برند */
            --primary-dark: var(--c5); /* #480ca8 - تیره‌تر برای hover */
            --accent: var(--c1);       /* #f72585 - صورتی تند برای دکمه‌ها */
            --bg: var(--white);
            --text: var(--gray-dark);
            --shadow: 0 8px 25px rgba(114, 9, 183, 0.12);
            --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            --sidebar-width: 255px;
            --overlay-bg: rgba(0, 0, 0, 0.62);
            --sidebar-bg: rgba(255, 255, 255, 0.98);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html, body {
            font-family: 'Vazirmatn', sans-serif;
            background: var(--gray-light);
            color: var(--text);
            overflow-x: hidden;
            transition: transform 0.35s ease;
        }

        a { text-decoration: none; color: inherit; transition: var(--transition); }
        img { max-width: 100%; height: auto; display: block; }

        /* ===== هدر ===== */
        header {
            position: fixed; top: 0; left: 0; right: 0; z-index: 999;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(14px);
            box-shadow: 0 1px 5px rgba(0,0,0,0.06);
            transition: var(--transition);
        }
        header.scrolled {
            background: var(--bg);
            box-shadow: 0 4px 18px rgba(0,0,0,0.1);
        }
        body {
            padding-top: 5.2rem;
        }

        .container {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        .header-inner {
            display: flex; align-items: center; justify-content: space-between;
            height: 5.2rem;
        }

        /* لوگو - افقی با ابعاد 1408x736 (نسبت 1.91:1) */
        .logo {
            display: flex; align-items: center;
            flex-shrink: 0;
        }
        .logo img {
            height: 60px;
            width: auto;
            aspect-ratio: 1408 / 736;
            object-fit: contain;
            transition: var(--transition);
            border: none;
            box-shadow: none;
            background: transparent;
            padding: 0;
        }
        .logo:hover img { 
            transform: scale(1.05); 
            opacity: 0.9;
        }

        /* ناوبری دسکتاپ */
        nav {
            display: none;
        }
        @media(min-width: 992px) {
            nav { display: flex; align-items: center; gap: 1.1rem; }
            nav a {
                padding: 0.65rem 1.15rem;
                border-radius: 12px;
                font-weight: 600;
                color: var(--gray-dark);
                position: relative;
                font-size: 0.95rem;
            }
            nav a::after {
                content: ''; position: absolute; bottom: 0; left: 50%;
                width: 0; height: 2.5px; background: var(--accent);
                transform: translateX(-50%); transition: var(--transition);
                border-radius: 2px;
            }
            nav a:hover::after { width: 70%; }
            nav a:hover { 
                color: var(--primary); 
                background: linear-gradient(135deg, rgba(114,9,183,0.08), rgba(247,37,133,0.08));
                transform: translateY(-1px);
            }
        }

        /* دکمه‌ها */
        .auth {
            display: none;
        }
        @media(min-width: 992px) {
            .auth { display: flex; gap: 0.75rem; }
        }

        .btn {
            padding: 0.55rem 1.25rem;
            border-radius: 12px;
            font-weight: 700;
            font-size: 0.92rem;
            transition: var(--transition);
            border: 2.5px solid transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            min-width: 100px;
        }
        .btn i {
            font-size: 1rem;
        }
        .btn-outline {
            border-color: var(--primary);
            color: var(--primary);
            background: transparent;
        }
        .btn-outline:hover {
            background: var(--primary);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(114,9,183,0.25);
        }
        .btn-primary {
            background: linear-gradient(135deg, var(--accent), var(--primary));
            color: #fff;
            box-shadow: var(--shadow);
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, var(--primary), var(--c5));
            transform: translateY(-3px);
            box-shadow: 0 10px 22px rgba(114,9,183,0.3);
        }

        /* ===== همبرگر منو - مینیمال و متحرک ===== */
        .hamburger {
            position: relative;
            width: 52px;
            height: 52px;
            background: linear-gradient(135deg, rgba(114,9,183,0.1), rgba(247,37,133,0.1));
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            z-index: 1001;
            box-shadow: 0 4px 12px rgba(114,9,183,0.15);
        }
        .hamburger:hover {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            transform: scale(1.08);
        }
        .hamburger:hover .line {
            background: var(--white);
        }
        .hamburger.active {
            background: linear-gradient(135deg, var(--primary), var(--accent));
        }
        .hamburger .line {
            width: 24px;
            height: 2.5px;
            background: var(--primary);
            border-radius: 3px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        .hamburger .line::before,
        .hamburger .line::after {
            content: '';
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            border-radius: inherit;
            transition: inherit;
        }
        .hamburger .line::before {
            top: -8px;
        }
        .hamburger .line::after {
            top: 8px;
        }

        /* حالت X */
        .hamburger.active .line {
            background: transparent;
        }
        .hamburger.active .line::before {
            transform: translateY(8px) rotate(45deg);
            background: var(--white);
        }
        .hamburger.active .line::after {
            transform: translateY(-8px) rotate(-45deg);
            background: var(--white);
        }

        @media(min-width: 992px) { 
            .hamburger { display: none; } 
        }

        /* ===== سایدبار موبایل - از راست (RTL) ===== */
        .sidebar-overlay {
            position: fixed;
            inset: 0;
            background: var(--overlay-bg);
            backdrop-filter: blur(16px);
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            z-index: 999;
        }
        .sidebar-overlay.open {
            opacity: 1;
            visibility: visible;
        }

        .sidebar {
            position: fixed;
            top: 0;
            right: calc(-1 * var(--sidebar-width));
            width: var(--sidebar-width);
            height: 100vh;
            background: var(--sidebar-bg);
            backdrop-filter: blur(24px);
            box-shadow: -10px 0 40px rgba(0,0,0,0.15);
            padding: 1.8rem;
            display: flex;
            flex-direction: column;
            transition: right 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
            z-index: 1000;
            overflow-y: auto;
        }
        .sidebar.open {
            right: 0;
        }

        /* هدر سایدبار */
        .sidebar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 1.4rem;
            margin-bottom: 1.8rem;
            border-bottom: 1.5px solid rgba(114,9,183,0.18);
        }
        .sidebar-logo {
            display: flex;
            align-items: center;
        }
        .sidebar-logo img {
            height: 50px;
            width: auto;
            aspect-ratio: 1408 / 736;
            object-fit: contain;
            border: none;
            box-shadow: none;
            background: transparent;
            padding: 0;
        }

        /* دکمه بستن */
        .close-sidebar {
            background: linear-gradient(135deg, rgba(114,9,183,0.12), rgba(247,37,133,0.12));
            border: none;
            border-radius: 50%;
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 1.4rem;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 4px 10px rgba(114,9,183,0.15);
        }
        .close-sidebar:hover {
            background: #ef4444;
            color: white;
            transform: rotate(90deg) scale(1.1);
            box-shadow: 0 6px 16px rgba(239,68,68,0.3);
        }

        /* ناوبری سایدبار */
        .sidebar-nav {
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
            margin-bottom: auto;
            flex: 1;
        }
        .sidebar-nav a {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            padding: 0.75rem 0.9rem;
            background: rgba(255,255,255,0.55);
            border-radius: 14px;
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--gray-dark);
            transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(114,9,183,0.08);
            text-decoration: none;
        }
        .sidebar-nav a::before {
            content: '';
            position: absolute;
            right: 0; top: 0; bottom: 0;
            width: 3px;
            background: linear-gradient(to bottom, var(--accent), var(--primary));
            border-radius: 4px;
            transform: scaleY(0);
            transform-origin: center;
            transition: transform 0.35s ease;
        }
        .sidebar-nav a:hover {
            background: linear-gradient(135deg, rgba(247,37,133,0.10), rgba(114,9,183,0.10));
            color: var(--primary);
            transform: translateX(-4px);
            border-color: rgba(114,9,183,0.22);
            box-shadow: 0 8px 22px rgba(114,9,183,0.10);
        }
        .sidebar-nav a:hover::before { transform: scaleY(1); }

        /* آیتم فعال سایدبار موبایل */
        .sidebar-nav a.active {
            background: linear-gradient(135deg, rgba(247,37,133,0.16), rgba(114,9,183,0.16));
            color: var(--primary);
            border-color: rgba(114,9,183,0.32);
            box-shadow: 0 8px 22px rgba(114,9,183,0.14);
        }
        .sidebar-nav a.active::before { transform: scaleY(1); }
        .sidebar-nav a.active .nav-ico {
            background: linear-gradient(135deg, var(--accent), var(--primary));
            color: #fff;
            box-shadow: 0 8px 18px rgba(247,37,133,0.30);
        }
        .sidebar-nav a.active .nav-chev { color: var(--accent); }
        [data-theme="dark"] .sidebar-nav a.active {
            background: linear-gradient(135deg, rgba(247,37,133,0.24), rgba(114,9,183,0.24));
            color: #fff;
        }

        .sidebar-nav .nav-ico {
            width: 36px; height: 36px;
            border-radius: 11px;
            background: linear-gradient(135deg, rgba(247,37,133,0.14), rgba(114,9,183,0.14));
            display: inline-flex; align-items: center; justify-content: center;
            color: var(--primary);
            flex-shrink: 0;
            transition: background .3s ease, color .3s ease, transform .35s ease, box-shadow .3s ease;
        }
        .sidebar-nav .nav-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
        .sidebar-nav a:hover .nav-ico {
            background: linear-gradient(135deg, var(--accent), var(--primary));
            color: #fff;
            transform: rotate(-6deg) scale(1.05);
            box-shadow: 0 8px 18px rgba(247,37,133,0.30);
        }
        .sidebar-nav .nav-label {
            flex: 1;
            line-height: 1.2;
        }
        .sidebar-nav .nav-chev {
            display: inline-flex; align-items: center; justify-content: center;
            color: #b8b3c8;
            transition: transform 0.35s ease, color .3s ease;
        }
        .sidebar-nav .nav-chev svg { width: 14px; height: 14px; }
        .sidebar-nav a:hover .nav-chev {
            transform: translateX(6px);
            color: var(--accent);
        }

        /* دکمه‌های ورود/ثبت‌نام */
        .sidebar-auth {
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
            margin-top: 1.8rem;
            padding-top: 1.8rem;
            border-top: 1.5px solid rgba(114,9,183,0.18);
        }
        .sidebar-auth .btn {
            width: 100%;
            justify-content: center;
            padding: 0.9rem 1.2rem;
            font-size: 0.98rem;
            font-weight: 700;
        }
        .sidebar-auth .btn-primary {
            background: linear-gradient(135deg, var(--accent), var(--primary));
            box-shadow: 0 8px 20px rgba(247,37,133,0.25);
        }
        .sidebar-auth .btn-primary:hover {
            background: linear-gradient(135deg, var(--primary), var(--c5));
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(114,9,183,0.3);
        }

        /* انیمیشن آیتم‌ها */
        .sidebar-nav a,
        .sidebar-auth .btn {
            opacity: 0;
            transform: translateX(40px);
        }
        .sidebar.open .sidebar-nav a,
        .sidebar.open .sidebar-auth .btn {
            opacity: 1;
            transform: translateX(0);
            transition: all 0.55s ease;
        }
        .sidebar.open .sidebar-nav a:nth-child(1) { transition-delay: 0.18s; }
        .sidebar.open .sidebar-nav a:nth-child(2) { transition-delay: 0.24s; }
        .sidebar.open .sidebar-nav a:nth-child(3) { transition-delay: 0.30s; }
        .sidebar.open .sidebar-nav a:nth-child(4) { transition-delay: 0.36s; }
        .sidebar.open .sidebar-nav a:nth-child(5) { transition-delay: 0.42s; }
        .sidebar.open .sidebar-nav a:nth-child(6) { transition-delay: 0.48s; }
        .sidebar.open .sidebar-auth .btn:nth-child(1) { transition-delay: 0.58s; }
        .sidebar.open .sidebar-auth .btn:nth-child(2) { transition-delay: 0.64s; }
        .sidebar.open .sidebar-auth .btn:nth-child(3) { transition-delay: 0.70s; }

        /* جابجایی محتوای اصلی */
        .sidebar-open body {
            overflow: hidden;
        }
        .sidebar-open .header-inner,
        .sidebar-open main,
        .sidebar-open footer {
            transform: translateX(calc(-1 * var(--sidebar-width)));
            transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

    
/* --- header.php inline block 2 (HEADER_ONLY nav) --- */

    :root {
        --c1: #f72585; --c2: #b5179e; --c3: #7209b7; --c4: #560bad; --c5: #480ca8;
        --c6: #3a0ca3; --c7: #3f37c9; --c8: #4361ee; --c9: #4895ef; --c10: #4cc9f0;
        --white: #ffffff; --black: #000000; --gray-light: #f8f9fa; --gray-dark: #212529;
        --primary: var(--c3); --primary-dark: var(--c5); --accent: var(--c1);
        --bg: var(--white); --text: var(--gray-dark);
        --shadow: 0 8px 25px rgba(114, 9, 183, 0.12);
        --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        --sidebar-width: 255px; --overlay-bg: rgba(0, 0, 0, 0.62);
        --sidebar-bg: rgba(255, 255, 255, 0.98);
    }
    header#header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: rgba(255,255,255,0.95); backdrop-filter: blur(14px); box-shadow: 0 1px 5px rgba(0,0,0,0.06); transition: var(--transition); }
    /* Unify header brand palette with the homepage (softened accent) across all public pages */
    header#header { --accent:#ec4899; --c1:#ec4899; --c3:#7c3aed; --c5:#5b21b6; --primary:#7c3aed; }
    header#header.scrolled { background: var(--bg); box-shadow: 0 4px 18px rgba(0,0,0,0.1); }
    /* --- Dark theme: top header --- */
    [data-theme="dark"] header#header { background: rgba(15,13,26,0.85); box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
    [data-theme="dark"] header#header.scrolled { background: rgba(15,13,26,0.96); box-shadow: 0 4px 18px rgba(0,0,0,0.5); }
    [data-theme="dark"] header#header nav a { color: #d9d3f0; }
    [data-theme="dark"] header#header nav a:hover { color: #fff; background: linear-gradient(135deg, rgba(114,9,183,0.22), rgba(247,37,133,0.22)); }
    [data-theme="dark"] header#header nav a.active { color: #fff; background: linear-gradient(135deg, rgba(114,9,183,0.30), rgba(247,37,133,0.30)); box-shadow: 0 4px 16px rgba(247,37,133,0.20); }
    [data-theme="dark"] header#header .btn-outline { border-color: #9d5bff; color: #d9b8ff; }
    [data-theme="dark"] header#header .btn-outline:hover { background: var(--primary); color: #fff; }
    body { padding-top: 5.2rem; }
    header#header .container { max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; }
    header#header .header-inner { display: flex; align-items: center; justify-content: space-between; height: 5.2rem; }
    header#header .logo { display: flex; align-items: center; flex-shrink: 0; }
    header#header .logo img { height: 60px; width: auto; aspect-ratio: 1408/736; object-fit: contain; transition: var(--transition); border: none; box-shadow: none; background: transparent; padding: 0; }
    header#header .logo:hover img { transform: scale(1.05); opacity: 0.9; }
    header#header nav { display: none; }
    @media(min-width: 992px) {
        header#header nav { display: flex; align-items: center; gap: 1.1rem; }
        header#header nav a { padding: 0.65rem 1.15rem; border-radius: 12px; font-weight: 600; color: var(--gray-dark); position: relative; font-size: 0.95rem; text-decoration: none; }
        header#header nav a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2.5px; background: var(--accent); transform: translateX(-50%); transition: var(--transition); border-radius: 2px; }
        header#header nav a:hover::after { width: 70%; }
        header#header nav a:hover { color: var(--primary); background: linear-gradient(135deg, rgba(114,9,183,0.08), rgba(247,37,133,0.08)); transform: translateY(-1px); }
        /* لینک صفحهٔ فعال */
        header#header nav a.active {
            color: var(--primary);
            background: linear-gradient(135deg, rgba(114,9,183,0.12), rgba(247,37,133,0.12));
            box-shadow: 0 4px 14px rgba(114,9,183,0.14);
        }
        header#header nav a.active::after {
            width: 70%;
            height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
        }
    }
    header#header .auth { display: none; }
    @media(min-width: 992px) { header#header .auth { display: flex !important; gap: 0.75rem; } }
    header#header .btn { padding: 0.55rem 1.25rem; border-radius: 12px; font-weight: 700; font-size: 0.92rem; transition: var(--transition); border: 2.5px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 100px; text-decoration: none; }
    header#header .btn i { font-size: 1rem; }
    header#header .btn-outline { border-color: var(--primary); color: var(--primary); background: transparent; }
    header#header .btn-outline:hover { background: var(--primary); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(114,9,183,0.25); }
    header#header .btn-primary { background: linear-gradient(135deg, var(--accent), var(--primary)); color: #fff; box-shadow: var(--shadow); }
    header#header .btn-primary:hover { background: linear-gradient(135deg, var(--primary), var(--c5)); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(114,9,183,0.3); }
    .hamburger { position: relative; width: 52px; height: 52px; background: linear-gradient(135deg, rgba(114,9,183,0.1), rgba(247,37,133,0.1)); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); z-index: 1001; box-shadow: 0 4px 12px rgba(114,9,183,0.15); }
    .hamburger:hover { background: linear-gradient(135deg, var(--primary), var(--accent)); transform: scale(1.08); }
    .hamburger:hover .line { background: var(--white); }
    .hamburger.active { background: linear-gradient(135deg, var(--primary), var(--accent)); }
    .hamburger .line { width: 24px; height: 2.5px; background: var(--primary); border-radius: 3px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
    .hamburger .line::before, .hamburger .line::after { content: ''; position: absolute; left: 0; width: 100%; height: 100%; background: inherit; border-radius: inherit; transition: inherit; }
    .hamburger .line::before { top: -8px; }
    .hamburger .line::after { top: 8px; }
    .hamburger.active .line { background: transparent; }
    .hamburger.active .line::before { transform: translateY(8px) rotate(45deg); background: var(--white); }
    .hamburger.active .line::after { transform: translateY(-8px) rotate(-45deg); background: var(--white); }
    @media(min-width: 992px) { .hamburger { display: none; } }
    .sidebar-overlay { position: fixed; inset: 0; background: var(--overlay-bg); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: var(--transition); z-index: 999; }
    .sidebar-overlay.open { opacity: 1; visibility: visible; }
    .sidebar { position: fixed; top: 0; right: calc(-1 * var(--sidebar-width)); width: var(--sidebar-width); height: 100vh; padding: 0; background: var(--sidebar-bg); backdrop-filter: blur(24px); z-index: 1000; transition: right 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: -8px 0 32px rgba(0,0,0,0.15); display: flex; flex-direction: column; overflow-y: auto; }
    .sidebar.open { right: 0; }
    .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; border-bottom: 1px solid rgba(114,9,183,0.12); }
    .sidebar-header .logo img, .sidebar-header .sidebar-logo img { height: 44px; width: auto; aspect-ratio: 1408/736; object-fit: contain; }
    .close-sidebar { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(114,9,183,0.18); background: rgba(114,9,183,0.06); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); color: var(--primary); }
    .close-sidebar:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: rotate(90deg) scale(1.05); }
    .close-sidebar svg { width: 18px; height: 18px; }
    .sidebar-nav { padding: 0.9rem 0.9rem; display: flex; flex-direction: column; flex: 1; gap: 0.4rem; }
    .sidebar-nav a {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.65rem 0.8rem;
        color: var(--gray-dark); font-weight: 700; font-size: 0.93rem;
        transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
        background: rgba(255,255,255,0.5);
        border: 1px solid rgba(114,9,183,0.08);
        border-radius: 10px;
        text-decoration: none;
        position: relative; overflow: hidden;
    }
    .sidebar-nav a::before {
        content:''; position: absolute; right: 0; top: 10%; bottom: 10%; width: 3px;
        background: linear-gradient(to bottom, var(--accent), var(--primary));
        border-radius: 4px; transform: scaleY(0); transform-origin: center;
        transition: transform .35s ease;
    }
    .sidebar-nav a:hover {
        background: linear-gradient(135deg, rgba(247,37,133,0.10), rgba(114,9,183,0.10));
        color: var(--primary);
        transform: translateX(-4px);
        border-color: rgba(114,9,183,0.22);
        box-shadow: 0 8px 22px rgba(114,9,183,0.10);
    }
    .sidebar-nav a:hover::before { transform: scaleY(1); }
    .sidebar-nav .nav-ico {
        width: 34px; height: 34px; border-radius: 9px;
        background: linear-gradient(135deg, rgba(247,37,133,0.14), rgba(114,9,183,0.14));
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--primary); flex-shrink: 0;
        transition: background .3s ease, color .3s ease, transform .35s ease, box-shadow .3s ease;
    }
    .sidebar-nav .nav-ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }
    .sidebar-nav a:hover .nav-ico {
        background: linear-gradient(135deg, var(--accent), var(--primary));
        color: #fff; transform: rotate(-6deg) scale(1.05);
        box-shadow: 0 8px 18px rgba(247,37,133,0.30);
    }
    .sidebar-nav .nav-label { flex: 1; line-height: 1.2; }
    .sidebar-nav .nav-chev { display: inline-flex; color: #b8b3c8; transition: transform .35s ease, color .3s ease; }
    .sidebar-nav .nav-chev svg { width: 13px; height: 13px; }
    .sidebar-nav a:hover .nav-chev { transform: translateX(6px); color: var(--accent); }
    .sidebar-auth { padding: 1rem 1.2rem 1.4rem; border-top: 1px solid rgba(114,9,183,0.12); display: flex; flex-direction: column; gap: 0.6rem; }
    .sidebar-auth .btn { width: 100%; justify-content: center; padding: 0.7rem; border-radius: 12px; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; }
    .sidebar-auth .btn svg { stroke: currentColor; }
    .sidebar-auth .btn-primary:hover { background: linear-gradient(135deg, var(--primary), var(--c5)); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(114,9,183,0.3); }
    .sidebar-nav a, .sidebar-auth .btn, .sidebar-auth .auth-link { opacity: 0; transform: translateX(40px); }
    .sidebar.open .sidebar-nav a, .sidebar.open .sidebar-auth .btn, .sidebar.open .sidebar-auth .auth-link { opacity: 1; transform: translateX(0); transition: all 0.55s ease; }
    .sidebar.open .sidebar-nav a:nth-child(1) { transition-delay: 0.18s; }
    .sidebar.open .sidebar-nav a:nth-child(2) { transition-delay: 0.24s; }
    .sidebar.open .sidebar-nav a:nth-child(3) { transition-delay: 0.30s; }
    .sidebar.open .sidebar-nav a:nth-child(4) { transition-delay: 0.36s; }
    .sidebar.open .sidebar-nav a:nth-child(5) { transition-delay: 0.42s; }
    .sidebar.open .sidebar-nav a:nth-child(6) { transition-delay: 0.48s; }
    .sidebar.open .sidebar-auth .btn:nth-child(1) { transition-delay: 0.58s; }
    .sidebar.open .sidebar-auth .btn:nth-child(2) { transition-delay: 0.64s; }
    .sidebar.open .sidebar-auth .btn:nth-child(3) { transition-delay: 0.70s; }
    .sidebar-open body { overflow: hidden; }
    .sidebar-open .header-inner, .sidebar-open main, .sidebar-open footer { transform: translateX(calc(-1 * var(--sidebar-width))); transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }

    /* --- Dark theme: mobile sidebar --- */
    [data-theme="dark"] {
        --sidebar-bg: rgba(23, 20, 42, 0.98);
        --overlay-bg: rgba(0, 0, 0, 0.72);
    }
    [data-theme="dark"] .sidebar { box-shadow: -8px 0 32px rgba(0,0,0,0.55); }
    [data-theme="dark"] .sidebar-header { border-bottom-color: rgba(255,255,255,0.10); }
    [data-theme="dark"] .close-sidebar {
        border-color: var(--accent);
        background: rgba(247,37,133,0.10);
        color: var(--accent);
    }
    [data-theme="dark"] .close-sidebar:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
    [data-theme="dark"] .sidebar-nav a {
        color: #eceaf6;
        background: rgba(255,255,255,0.04);
        border-color: rgba(255,255,255,0.08);
    }
    [data-theme="dark"] .sidebar-nav a:hover {
        background: linear-gradient(135deg, rgba(247,37,133,0.18), rgba(114,9,183,0.18));
        color: #fff;
        border-color: rgba(190,120,255,0.35);
        box-shadow: 0 8px 22px rgba(0,0,0,0.35);
    }
    [data-theme="dark"] .sidebar-nav .nav-ico {
        background: linear-gradient(135deg, rgba(247,37,133,0.22), rgba(114,9,183,0.22));
        color: #d9b8ff;
    }
    [data-theme="dark"] .sidebar-nav .nav-chev { color: #7d7796; }
    [data-theme="dark"] .sidebar-auth { border-top-color: rgba(255,255,255,0.10); }

    /* --- Sidebar bottom: theme toggle + auth buttons polish --- */
    .sidebar-auth { margin-top: 0; padding: 0.7rem 0.9rem 1rem; gap: 0.45rem; }
    .sidebar-auth .theme-toggle-row {
        width: 100%;
        margin: 0 0 0.5rem;
        padding: 0.68rem 0.9rem;
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(114,9,183,0.06);
    }
    [data-theme="dark"] .sidebar-auth .theme-toggle-row {
        background: rgba(255,255,255,0.05);
        border-color: rgba(255,255,255,0.10);
        color: #eceaf6;
        box-shadow: none;
    }
    [data-theme="dark"] .sidebar-auth .theme-toggle-row:hover { border-color: rgba(190,120,255,0.45); background: rgba(255,255,255,0.08); }

    /* auth links styled like nav items (icon + label + chevron) */
    .sidebar-auth .auth-link {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.6rem 0.75rem; margin: 0;
        border-radius: 10px; border: 1px solid rgba(114,9,183,0.08);
        background: rgba(255,255,255,0.5);
        color: var(--gray-dark); font-weight: 700; font-size: 0.92rem;
        text-decoration: none; position: relative; overflow: hidden;
        transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }
    .sidebar-auth .auth-link .nav-ico {
        width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        transition: background .3s ease, color .3s ease, transform .35s ease, box-shadow .3s ease;
    }
    .sidebar-auth .auth-link .nav-ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }
    .sidebar-auth .auth-link .nav-label { flex: 1; line-height: 1.2; }
    .sidebar-auth .auth-link .nav-chev { display: inline-flex; color: #b8b3c8; transition: transform .35s ease, color .3s ease; }
    .sidebar-auth .auth-link .nav-chev svg { width: 13px; height: 13px; }
    .sidebar-auth .auth-link:hover { transform: translateX(-4px); }
    .sidebar-auth .auth-link:hover .nav-chev { transform: translateX(6px); }

    /* login variant (accent/pink) */
    .sidebar-auth .auth-link--login {
        background: linear-gradient(135deg, rgba(247,37,133,0.10), rgba(247,37,133,0.04));
        border-color: rgba(247,37,133,0.22);
    }
    .sidebar-auth .auth-link--login .nav-ico {
        background: linear-gradient(135deg, rgba(247,37,133,0.16), rgba(247,37,133,0.10));
        color: var(--accent);
    }
    .sidebar-auth .auth-link--login:hover {
        border-color: rgba(247,37,133,0.40);
        box-shadow: 0 8px 20px rgba(247,37,133,0.16);
    }
    .sidebar-auth .auth-link--login:hover .nav-ico { background: linear-gradient(135deg, var(--accent), #d61a6f); color:#fff; transform: rotate(-6deg) scale(1.05); }
    .sidebar-auth .auth-link--login:hover .nav-chev { color: var(--accent); }

    /* register variant (indigo/blue) */
    .sidebar-auth .auth-link--register {
        background: linear-gradient(135deg, rgba(67,97,238,0.12), rgba(72,149,239,0.05));
        border-color: rgba(67,97,238,0.24);
    }
    .sidebar-auth .auth-link--register .nav-ico {
        background: linear-gradient(135deg, rgba(67,97,238,0.18), rgba(72,149,239,0.10));
        color: #4895ef;
    }
    .sidebar-auth .auth-link--register:hover {
        border-color: rgba(67,97,238,0.42);
        box-shadow: 0 8px 20px rgba(67,97,238,0.16);
    }
    .sidebar-auth .auth-link--register:hover .nav-ico { background: linear-gradient(135deg, #4361ee, #4895ef); color:#fff; transform: rotate(-6deg) scale(1.05); }
    .sidebar-auth .auth-link--register:hover .nav-chev { color: #4895ef; }

    /* dark theme auth links */
    [data-theme="dark"] .sidebar-auth .auth-link {
        color: #eceaf6;
    }
    [data-theme="dark"] .sidebar-auth .auth-link .nav-chev { color: #7d7796; }
    [data-theme="dark"] .sidebar-auth .auth-link--login {
        background: linear-gradient(135deg, rgba(247,37,133,0.18), rgba(247,37,133,0.06));
        border-color: rgba(247,37,133,0.32);
    }
    [data-theme="dark"] .sidebar-auth .auth-link--login .nav-ico { background: linear-gradient(135deg, rgba(247,37,133,0.30), rgba(247,37,133,0.16)); color:#ff7ab3; }
    [data-theme="dark"] .sidebar-auth .auth-link--register {
        background: linear-gradient(135deg, rgba(72,149,239,0.20), rgba(67,97,238,0.08));
        border-color: rgba(72,149,239,0.34);
    }
    [data-theme="dark"] .sidebar-auth .auth-link--register .nav-ico { background: linear-gradient(135deg, rgba(72,149,239,0.32), rgba(67,97,238,0.18)); color:#8bb8ff; }

    /* keep .btn styling for logged-in dashboard/logout actions */
    .sidebar-auth .btn {
        width: 100%; justify-content: center; padding: 0.7rem;
        border-radius: 10px; font-size: 0.92rem; font-weight: 800;
        display: inline-flex; align-items: center; gap: 0.5rem;
        border: 2px solid transparent; transition: var(--transition);
    }
    .sidebar-auth .btn-outline {
        border-color: rgba(114,9,183,0.28);
        color: var(--primary);
        background: rgba(114,9,183,0.04);
    }
    .sidebar-auth .btn-outline:hover {
        background: var(--primary); color: #fff; border-color: var(--primary);
        transform: translateY(-2px); box-shadow: 0 10px 22px rgba(114,9,183,0.28);
    }
    .sidebar-auth .btn-primary {
        background: linear-gradient(135deg, var(--accent), var(--primary));
        color: #fff; box-shadow: 0 8px 20px rgba(114,9,183,0.28);
    }
    .sidebar-auth .btn-primary:hover {
        background: linear-gradient(135deg, var(--primary), var(--c5));
        transform: translateY(-2px); box-shadow: 0 12px 28px rgba(114,9,183,0.35);
    }
    [data-theme="dark"] .sidebar-auth .btn-outline {
        border-color: rgba(190,120,255,0.40);
        color: #d9b8ff;
        background: rgba(255,255,255,0.04);
    }
    [data-theme="dark"] .sidebar-auth .btn-outline:hover {
        background: var(--primary); color: #fff; border-color: var(--primary);
        box-shadow: 0 10px 22px rgba(0,0,0,0.4);
    }

/* --- footer.php inline block 1 --- */

    .admin-footer {
        background: rgba(255,255,255,0.9);
        border-top: 1px solid rgba(0,0,0,0.05);
        padding: 1rem 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        font-size: 0.9rem;
        color: #4b5563;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.05);
        margin-top: 1.5rem;
    }
    .admin-footer__brand {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }
    .admin-footer__logo {
        font-weight: 700;
        font-size: 1rem;
        color: #6a0dad;
    }
    .admin-footer__nav {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .admin-footer__nav a {
        color: #4b5563;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s ease;
    }
    .admin-footer__nav a:hover {
        color: #6a0dad;
    }
    .admin-dashboard + .admin-footer {
        margin-right: 280px;
        width: calc(100% - 280px);
    }
    @media (max-width: 992px) {
        .admin-footer {
            flex-direction: column;
            align-items: flex-start;
        }
        .admin-dashboard + .admin-footer {
            margin-right: 0;
            width: 100%;
        }
    }
    [data-theme="dark"] .admin-footer,
    .dark-theme .admin-footer {
        background: rgba(15,15,26,0.9);
        color: #cbd5e0;
        border-top-color: rgba(255,255,255,0.08);
    }
    [data-theme="dark"] .admin-footer__nav a,
    .dark-theme .admin-footer__nav a {
        color: #cbd5e0;
    }

/* --- footer.php inline block 2 --- */

    /* ===== فوتر بهینه و بدون باگ ===== */
    .footer-galaxy {
        background: rgba(255, 255, 255, 0.98);
        color: var(--gray-dark);
        padding: 3rem 0 1.5rem;
        margin-top: 3rem;
        border-top: 2px solid rgba(106, 13, 173, 0.15);
        position: relative;
        z-index: 1;
        width: 100%;
        overflow: hidden;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    
    /* تنظیمات خاص برای پنل ادمین */
    .admin-dashboard ~ .footer-galaxy,
    body:has(.admin-dashboard) .footer-galaxy {
        margin-right: 280px !important;
        width: calc(100% - 280px) !important;
    }
    
    @media (max-width: 992px) {
        .admin-dashboard ~ .footer-galaxy,
        body:has(.admin-dashboard) .footer-galaxy {
            margin-right: 0 !important;
            width: 100% !important;
        }
    }
    
    /* Dark theme برای فوتر */
    [data-theme="dark"] .footer-galaxy,
    .dark-theme .footer-galaxy {
        background: rgba(26, 26, 46, 0.98) !important;
        color: #e2e8f0 !important;
        border-top-color: rgba(106, 13, 173, 0.4) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
    }
    
    [data-theme="dark"] .footer-galaxy h4,
    .dark-theme .footer-galaxy h4 {
        color: #e2e8f0 !important;
    }
    
    [data-theme="dark"] .footer-galaxy a,
    [data-theme="dark"] .footer-galaxy p,
    [data-theme="dark"] .footer-galaxy .contact-item,
    .dark-theme .footer-galaxy a,
    .dark-theme .footer-galaxy p,
    .dark-theme .footer-galaxy .contact-item {
        color: #cbd5e0 !important;
    }
    
    [data-theme="dark"] .footer-galaxy .slogan,
    .dark-theme .footer-galaxy .slogan {
        color: #94a3b8 !important;
    }
    
    [data-theme="dark"] .footer-galaxy .footer-col ul a:hover,
    .dark-theme .footer-galaxy .footer-col ul a:hover {
        background: rgba(106, 13, 173, 0.2) !important;
        color: #e91e63 !important;
    }
    
    [data-theme="dark"] .footer-galaxy .newsletter-form,
    .dark-theme .footer-galaxy .newsletter-form {
        background: rgba(15, 15, 26, 0.8) !important;
        border-color: rgba(106, 13, 173, 0.3) !important;
    }
    
    [data-theme="dark"] .footer-galaxy .newsletter-form input,
    .dark-theme .footer-galaxy .newsletter-form input {
        color: #e2e8f0 !important;
        background: transparent !important;
    }
    
    [data-theme="dark"] .footer-galaxy .newsletter-form input::placeholder,
    .dark-theme .footer-galaxy .newsletter-form input::placeholder {
        color: #94a3b8 !important;
    }
    
    [data-theme="dark"] .footer-galaxy .footer-bottom,
    .dark-theme .footer-galaxy .footer-bottom {
        color: #94a3b8 !important;
        border-top-color: rgba(106, 13, 173, 0.3) !important;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.2rem;
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    @media (min-width: 640px) {
        .footer-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 992px) {
        .footer-grid { 
            grid-template-columns: 2fr 1fr 1fr 1.5fr; 
            gap: 3rem;
            padding: 0;
        }
    }

    .footer-col h4 {
        font-size: 1.12rem;
        font-weight: 700;
        margin-bottom: 1.1rem;
        color: var(--primary);
        position: relative;
        padding-bottom: 0.6rem;
    }
    .footer-col h4::after {
        content: '';
        position: absolute;
        bottom: 0; right: 0;
        width: 38px;
        height: 3px;
        background: linear-gradient(90deg, var(--accent), var(--primary));
        border-radius: 2px;
    }

    .footer-logo {
        display: inline-flex;
        align-items: center;
        margin-bottom: 0.9rem;
        text-decoration: none;
        transition: var(--transition);
    }
    .footer-logo img {
        height: 60px;
        width: auto;
        aspect-ratio: 1408 / 736;
        object-fit: contain;
        border: none;
        box-shadow: none;
        background: transparent;
        padding: 0;
        transition: var(--transition);
    }
    .footer-logo:hover img {
        transform: scale(1.05);
        opacity: 0.9;
    }

    .slogan {
        font-size: 0.94rem;
        color: #6b7280;
        line-height: 1.7;
        max-width: 280px;
        margin-top: 0.7rem;
    }

    .footer-col ul {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
    }
    .footer-col ul a {
        color: #4b5563;
        font-weight: 500;
        padding: 0.35rem 0;
        border-radius: 10px;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 0.94rem;
    }
    .footer-col ul a:hover {
        color: var(--accent);
        background: rgba(247, 37, 133, 0.1);
        padding-right: 0.8rem;
        transform: translateX(-4px);
    }
    .footer-col ul a i {
        font-size: 0.95rem;
        color: var(--primary);
        transition: transform 0.3s ease;
    }
    .footer-col ul a:hover i {
        transform: translateX(4px);
    }

    .contact-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #4b5563;
        margin-bottom: 0.8rem;
        font-size: 0.92rem;
        transition: var(--transition);
    }
    .contact-item:hover {
        color: var(--accent);
        transform: translateX(-4px);
    }
    .contact-item i {
        color: var(--primary);
        font-size: 1.1rem;
    }

    /* آیکون‌های تماس و ایمیل فوتر (SVG - مستقل از فونت) */
    .footer-galaxy a.contact-item { text-decoration: none; color: #4b5563; }
    .footer-galaxy .contact-ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        border-radius: 10px;
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        box-shadow: 0 4px 12px rgba(114, 9, 183, 0.25);
        transition: var(--transition);
    }
    .footer-galaxy .contact-ico svg {
        width: 18px;
        height: 18px;
        display: block;
    }
    .footer-galaxy .contact-item:hover .contact-ico {
        transform: translateY(-2px) scale(1.06);
        box-shadow: 0 6px 16px rgba(247, 37, 133, 0.35);
    }

    .newsletter-form {
        display: flex;
        margin-top: 0.9rem;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        background: var(--white);
        border: 2px solid rgba(114,9,183,0.18);
        transition: var(--transition);
    }
    .newsletter-form:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(114,9,183,0.15);
    }
    .newsletter-form input {
        flex: 1;
        min-width: 0;
        padding: 0.75rem 1rem;
        border: none;
        outline: none;
        font-size: 0.85rem;
        font-family: inherit;
        color: var(--gray-dark);
        background: transparent;
        text-overflow: ellipsis;
    }
    .newsletter-form input::placeholder {
        color: #9ca3af;
        font-size: 0.82rem;
        font-family: inherit;
    }
    .newsletter-form button {
        flex: 0 0 auto;
        min-width: 64px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        background: linear-gradient(135deg, var(--accent), var(--primary));
        color: #fff;
        border: none;
        padding: 0 1.2rem;
        font-size: 0.95rem;
        font-family: inherit;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        transition: var(--transition);
    }
    .newsletter-form button i {
        display: inline-block;
        font-size: 1rem;
        line-height: 1;
    }
    .newsletter-form button:hover {
        background: linear-gradient(135deg, var(--primary), var(--c5));
        transform: scale(1.03);
    }
    .newsletter-message {
        margin-top: 0.8rem;
        padding: 0.7rem 1rem;
        border-radius: 10px;
        font-size: 0.88rem;
        text-align: center;
        animation: slideDown 0.3s ease-out;
    }
    .newsletter-message.success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    .newsletter-message.error {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ===== شبکه‌های اجتماعی ===== */
    .social-networks {
        margin-top: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .social-row {
        display: flex;
        gap: 0.8rem;
        justify-content: flex-start;
        align-items: center;
    }
    
    .social-icon {
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(114, 9, 183, 0.1), rgba(106, 13, 173, 0.15));
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        border: 2px solid transparent;
    }
    
    .social-icon::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.4s ease, height 0.4s ease;
    }
    
    .social-icon:hover::before {
        width: 100px;
        height: 100px;
    }
    
    .social-icon img {
        width: 28px;
        height: 28px;
        object-fit: contain;
        filter: grayscale(0.3) opacity(0.85);
        transition: all 0.35s ease;
        position: relative;
        z-index: 1;
    }
    
    .social-icon:hover {
        transform: translateY(-5px) scale(1.08);
        box-shadow: 0 12px 30px rgba(114, 9, 183, 0.3);
    }
    
    .social-icon:hover img {
        filter: grayscale(0) opacity(1);
        transform: scale(1.15) rotate(5deg);
    }
    
    /* رنگ‌های اختصاصی */
    .social-icon.telegram:hover {
        background: linear-gradient(135deg, #0088cc, #00a1e4);
        border-color: #0088cc;
    }
    
    .social-icon.whatsapp:hover {
        background: linear-gradient(135deg, #25D366, #128C7E);
        border-color: #25D366;
    }
    
    .social-icon.instagram:hover {
        background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCB045);
        border-color: #833AB4;
    }
    
    .social-icon.rubika:hover {
        background: linear-gradient(135deg, #ED1C24, #C41E3A);
        border-color: #ED1C24;
    }
    
    .social-icon.eitaa:hover {
        background: linear-gradient(135deg, #FF6B00, #FF8C00);
        border-color: #FF6B00;
    }
    
    .social-icon.bale:hover {
        background: linear-gradient(135deg, #7C3AED, #A855F7);
        border-color: #7C3AED;
    }
    
    .footer-enamad-top {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
        margin: 1.2rem 0 0;
        padding: 0.8rem 1rem;
        max-width: 100%;
        background: linear-gradient(135deg, rgba(106, 13, 173, 0.06), rgba(236, 72, 153, 0.06));
        border: 1px solid rgba(106, 13, 173, 0.15);
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(106, 13, 173, 0.08);
    }
    .footer-enamad-top img {
        max-height: 80px;
        width: auto;
        background: var(--white);
        padding: 4px;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.25s ease;
    }
    .footer-enamad-top img:hover {
        transform: translateY(-2px) scale(1.04);
    }
    .footer-enamad-top .enamad-label {
        font-size: 0.82rem;
        font-weight: 700;
        color: #6a0dad;
        line-height: 1.5;
        white-space: nowrap;
    }
    @media (max-width: 480px) {
        .footer-enamad-top {
            flex-direction: column;
            gap: 0.5rem;
            padding: 0.8rem;
        }
        .footer-enamad-top .enamad-label { font-size: 0.78rem; white-space: nowrap; }
    }

    .footer-enamad {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 1.2rem;
    }
    .footer-enamad img {
        max-height: 95px;
        width: auto;
        background: var(--white);
        padding: 5px;
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        transition: transform 0.25s ease;
    }
    .footer-enamad img:hover {
        transform: translateY(-2px) scale(1.03);
    }

    .footer-bottom {
        margin-top: 2.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(114,9,183,0.15);
        text-align: center;
        font-size: 0.88rem;
        color: #6b7280;
    }
    .footer-bottom strong {
        background: linear-gradient(135deg, var(--accent), var(--primary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
    }

    /* ریسپانسیو کامل */
    @media (max-width: 480px) {
        .footer-galaxy { padding: 2.5rem 0 1.2rem; margin-top: 3rem; }
        .footer-logo img { height: 50px; width: auto; }
        .footer-logo { font-size: 1.5rem; }
        .social-icon { width: 40px; height: 40px; }
        .social-icon img { width: 24px; height: 24px; }
        .social-row { gap: 0.6rem; }

        /* خبرنامه موبایل: دکمه آیکونی داخل کادر ورودی */
        .newsletter-form {
            flex-direction: row;
            align-items: center;
            gap: 0.5rem;
            padding: 0.4rem 0.4rem 0.4rem 0.5rem;
            border: 2px solid rgba(114,9,183,0.22);
            border-radius: 16px;
            background: var(--white);
            box-shadow: 0 4px 14px rgba(0,0,0,0.06);
            overflow: visible;
            margin-top: 1rem;
        }
        .newsletter-form:focus-within {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(114,9,183,0.15);
        }
        .newsletter-form input {
            flex: 1;
            min-width: 0;
            width: auto;
            text-align: right;
            padding: 0.7rem 0.7rem;
            font-size: 0.9rem;
            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }
        .newsletter-form input:focus {
            box-shadow: none;
        }
        .newsletter-form input::placeholder {
            font-size: 0.88rem;
        }
        .newsletter-form button {
            flex: 0 0 auto;
            width: 46px;
            height: 46px;
            min-width: 0;
            padding: 0;
            border-radius: 12px;
            box-shadow: 0 6px 16px rgba(247,37,133,0.28);
        }
        .newsletter-form button .btn-text {
            display: none;
        }
        .newsletter-form button .btn-ico {
            width: 22px;
            height: 22px;
        }
        .newsletter-form button:hover {
            transform: scale(1.05);
        }
        /* دارک موبایل: کادر تیره، فیلد شفاف */
        [data-theme="dark"] .footer-galaxy .newsletter-form,
        .dark-theme .footer-galaxy .newsletter-form {
            background: rgba(15, 15, 26, 0.85) !important;
            border-color: rgba(247, 37, 133, 0.28) !important;
        }
        [data-theme="dark"] .footer-galaxy .newsletter-form input,
        .dark-theme .footer-galaxy .newsletter-form input {
            background: transparent !important;
            border: none !important;
        }
    }

    /* ===== موبایل: چیدمان تمیز و مرتب فوتر ===== */
    @media (max-width: 640px) {
        .footer-galaxy { padding: 2.2rem 0 1.2rem; }
        .footer-grid {
            grid-template-columns: 1fr;
            gap: 0;
            padding: 0 1.25rem;
        }
        /* هر ستون یک بلوک وسط‌چین با جداکننده ظریف */
        .footer-col {
            text-align: center;
            padding: 1.4rem 0;
            border-bottom: 1px solid rgba(114,9,183,0.10);
        }
        .footer-col:last-child { border-bottom: none; }

        /* ستون لوگو */
        .footer-col:first-child { padding-top: 0.4rem; }
        .footer-logo { justify-content: center; }
        .slogan { max-width: 100%; margin-left: auto; margin-right: auto; }

        /* عناوین وسط‌چین با خط زیر مرکزی */
        .footer-col h4 {
            display: inline-block;
            margin-bottom: 1rem;
        }
        .footer-col h4::after {
            right: 50%;
            transform: translateX(50%);
        }

        /* لینک‌های دسترسی سریع وسط‌چین */
        .footer-col ul { align-items: center; gap: 0.55rem; }
        .footer-col ul a { justify-content: center; }
        .footer-col ul a:hover {
            transform: none;
            padding-right: 0;
        }

        /* آیتم‌های تماس وسط‌چین */
        .contact-item { justify-content: center; }
        .contact-item:hover { transform: none; }

        /* شبکه‌های اجتماعی وسط و جمع‌وجور */
        .social-networks { align-items: center; margin-top: 1rem; }
        .social-row { justify-content: center; gap: 0.7rem; }

        /* نماد اعتماد وسط‌چین */
        .footer-enamad-top { justify-content: center; margin-inline: auto; }

        /* فرم خبرنامه با عرض کامل و ظاهر مدرن */
        .newsletter-form { max-width: 340px; margin-inline: auto; }
        .footer-col > p { max-width: 300px; margin-inline: auto; }

        .footer-bottom { margin-top: 1.6rem; padding-top: 1.2rem; }
    }

    /* دارک موبایل: جداکننده‌های ستون */
    @media (max-width: 640px) {
        [data-theme="dark"] .footer-galaxy .footer-col,
        .dark-theme .footer-galaxy .footer-col {
            border-bottom-color: rgba(255,255,255,0.08);
        }
        [data-theme="dark"] .footer-galaxy .footer-col:last-child,
        .dark-theme .footer-galaxy .footer-col:last-child {
            border-bottom: none;
        }
    }


/* ===== PER-PAGE SCOPED STYLES ===== */

/* --- auth-light.css @ body.page-auth --- */
/* auth-light.css - مینیمال */

body.page-auth {
    --c1: #ec4899;
    --c2: #d6409f;
    --c3: #7c3aed;
    --c4: #6d28d9;
    --c5: #5b21b6;
    --c6: #5145cd;
    --c7: #4f46e5;
    --c8: #4f6ef7;
    --c9: #5b9df9;
    --c10: #38bdf8;
    --white: #ffffff;
    --radius: 1.4rem;
    --radius-sm: 0.85rem;
    --transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    --shadow-lg: 0 20px 50px -20px rgba(45,30,90,0.22);
    --text-primary: #1c1830;
    --text-secondary: #5b5670;
    --text-muted: #6c6788;
    --border-light: rgba(28,24,48,0.10);
}
body.page-auth > *, body.page-auth *, body.page-auth *::before, body.page-auth *::after { margin: 0; padding: 0; box-sizing: border-box; }
body.page-auth {
    min-height: 100dvh;
    background: linear-gradient(135deg, var(--c1) 0%, var(--c3) 30%, var(--c6) 70%, var(--c10) 100%);
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
body.page-auth /* ═══ ذرات ═══ */
.sib-particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
body.page-auth .sib-particle {
    position: absolute;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    filter: blur(1px);
    animation: page-auth-float 20s infinite linear;
}
@keyframes page-auth-float {
    0%   { transform: translateY(100dvh) scale(0.5); opacity: 0; }
    10%, 90% { opacity: 0.6; }
    100% { transform: translateY(-100px) scale(1); opacity: 0; }
}
body.page-auth .bg-shapes { display: none; }
body.page-auth /* ═══ بازگشت ═══ */
.back-to-home { position: fixed; top: 1.2rem; right: 1.2rem; z-index: 10; }
body.page-auth .back-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    background: rgba(30,10,60,0.55);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    border: 1px solid rgba(255,255,255,0.2);
}
body.page-auth .back-link:hover { background: rgba(30,10,60,0.7); }
body.page-auth /* ═══ کانتینر ═══ */
.auth-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
}
body.page-auth .auth-container {
    max-width: 380px;
    width: 100%;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: page-auth-fadeUp 0.6s ease-out forwards;
    opacity: 0;
    border: 1px solid rgba(255,255,255,0.4);
    overflow: hidden;
}
@keyframes page-auth-fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.page-auth /* ═══ لوگو — مستطیلی ═══ */
.auth-logo {
    text-align: center;
    padding: 1.5rem 2rem 0.3rem;
}
body.page-auth .auth-logo img {
    max-width: 95px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 0.4rem;
    /* بدون border-radius مربعی — لوگو مستطیلی همان‌طور نمایش داده شود */
}
body.page-auth .auth-logo h1 {
    color: var(--text-primary);
    margin-bottom: 0.1rem;
}
body.page-auth .auth-logo p {
    color: var(--text-muted);
    text-align: center;
}
body.page-auth /* ═══ فرم ═══ */
.auth-form {
    padding: 0.8rem 2rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
body.page-auth .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
body.page-auth .form-label {
    color: var(--text-secondary);
}
body.page-auth .form-control {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--white);
    transition: var(--transition);
    color: var(--text-primary);
    outline: none;
}
body.page-auth .form-control::placeholder {
    color: var(--text-muted);
}
body.page-auth .form-control:focus {
    border-color: var(--c8);
    box-shadow: 0 0 0 3px rgba(67,97,238,0.12);
}
body.page-auth .form-control.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}
body.page-auth .form-control.valid {
    border-color: #10b981;
}
body.page-auth /* ═══ پسورد ═══ */
.password-wrapper { position: relative; }
body.page-auth .password-wrapper .form-control { padding-left: 2.8rem; }
body.page-auth .password-toggle {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem;
    transition: var(--transition);
    display: flex;
}
body.page-auth .password-toggle:hover { color: var(--c3); }
body.page-auth /* ═══ خطاها ═══ */
.error-message {
    color: #ef4444;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.25s ease;
}
body.page-auth .error-message.show {
    opacity: 1;
    max-height: 30px;
}
body.page-auth /* ═══ آلرت ═══ */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 2rem;
}
body.page-auth .alert-success, body.page-auth .alert.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
body.page-auth .alert-danger, body.page-auth .alert.danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
body.page-auth /* ═══ دکمه ═══ */
.btn-submit {
    padding: 0.65rem;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    width: 100%;
    background: linear-gradient(135deg, var(--c3), var(--c8));
    color: white;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0.3rem;
    box-shadow: 0 4px 14px rgba(114,9,183,0.3);
}
body.page-auth .btn-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(114,9,183,0.4);
}
body.page-auth .btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
body.page-auth /* ═══ اسپینر ═══ */
.spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
body.page-auth .spinner.is-active { display: inline-block; }
body.page-auth /* Small helper text shown under an input (e.g. "we'll text this number") */
.auth-form-hint {
    margin-top: 6px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Slightly larger emphasized link inside .auth-footer */
@keyframes spin { to { transform: rotate(360deg); } }
body.page-auth /* ═══ لینک‌ها ═══ */
.auth-links {
    text-align: center;
    padding: 0.2rem 0;
}
body.page-auth .auth-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--c5);
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
body.page-auth .auth-link:hover { color: var(--c3); background: rgba(114,9,183,0.04); }
body.page-auth /* ═══ دیوایدر ═══ */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.3rem 2rem;
    color: var(--text-muted);
}
body.page-auth .auth-divider::before, body.page-auth .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}
body.page-auth /* ═══ فوتر ═══ */
.auth-footer {
    text-align: center;
    padding: 0.3rem 2rem 1rem;
}
body.page-auth .auth-footer .auth-link {
    color: var(--c3);
    background: rgba(114,9,183,0.03);
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(114,9,183,0.08);
}
body.page-auth .auth-footer .auth-link:hover {
    background: rgba(114,9,183,0.08);
    border-color: rgba(114,9,183,0.15);
}
body.page-auth /* ═══ لودینگ ═══ */
.form-loading { pointer-events: none; opacity: 0.7; }
body.page-auth /* ═══ قوانین ═══ */
.auth-form .auth-links { color: var(--text-muted); }
body.page-auth .auth-form .auth-links a { color: var(--c2); text-decoration: none;  }
body.page-auth .auth-form .auth-links a:hover { text-decoration: underline; }
/* ═══ ریسپانسیو ═══ */
@media (max-width: 480px) {
    body.page-auth body { padding: 1rem 0.5rem; }
    body.page-auth .auth-container { border-radius: 1rem; }
    body.page-auth .auth-logo { padding: 1.2rem 1.5rem 0.2rem; }
    body.page-auth .auth-logo img { max-width: 80px; }
    body.page-auth .auth-form { padding: 0.6rem 1.5rem 0.5rem; }
    body.page-auth .auth-divider { padding: 0.2rem 1.5rem; }
    body.page-auth .auth-footer { padding: 0.3rem 1.5rem 1rem; }
    body.page-auth .alert { margin: 0 1.5rem; }
    body.page-auth .back-to-home { top: 0.8rem; right: 0.8rem; }
    body.page-auth .back-link {  padding: 0.4rem 0.8rem; }
    /* larger touch targets on small screens */
    body.page-auth .btn-submit { min-height: 44px; padding: 0.75rem;  }
    body.page-auth .form-control { min-height: 40px; }
}
body.page-auth /* ═══ OTP ═══ */
.otp-inputs { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
body.page-auth .otp-input {
    width: 48px; height: 52px; text-align: center;
     
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--text-primary);
    transition: var(--transition);
}
body.page-auth .otp-input:focus { border-color: var(--c8); box-shadow: 0 0 0 3px rgba(67,97,238,0.12); outline: none; }
body.page-auth .password-strength { margin-top: 4px; }
body.page-auth .strength-bar { height: 3px; border-radius: 3px; background: var(--border-light); overflow: hidden; }
body.page-auth .strength-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; width: 0; }
body.page-auth .strength-fill.weak { width: 33%; background: #ef4444; }
body.page-auth .strength-fill.medium { width: 66%; background: #f59e0b; }
body.page-auth .strength-fill.strong { width: 100%; background: #10b981; }
body.page-auth .otp-timer { text-align: center; margin-top: 14px;  color: var(--text-secondary);  }
body.page-auth .otp-timer.expired { color: #ef4444; }
body.page-auth .resend-btn {
    background: transparent; border: none; color: var(--c3);
      cursor: pointer;
    padding: 6px 14px; border-radius: 6px;
    transition: var(--transition); 
}
body.page-auth .resend-btn:hover:not(:disabled) { background: rgba(114,9,183,0.06); }
body.page-auth .resend-btn:disabled { opacity: 0.5; cursor: not-allowed; }
body.page-auth ::-webkit-scrollbar { width: 6px; }
body.page-auth ::-webkit-scrollbar-track { background: transparent; }
body.page-auth ::-webkit-scrollbar-thumb { background: var(--c8); border-radius: 3px; }

/* --- index.php @ body.page-index --- */
body.page-index {
            --c1: #f72585; --c2: #b5179e; --c3: #7209b7; --c4: #560bad; --c5: #480ca8;
            --c6: #3a0ca3; --c7: #3f37c9; --c8: #4361ee; --c9: #4895ef; --c10: #4cc9f0;
            --white: #ffffff; --black: #000000; --gray-light: #f8f9fa; --gray-dark: #212529;
            --primary: var(--c3); --accent: var(--c1); --bg: var(--white); --text: var(--gray-dark);
            --shadow: 0 12px 32px rgba(114,9,183,.15); --transition: all .4s cubic-bezier(.2,.8,.2,1);
            --radius: 1.8rem; --radius-sm: 1.2rem;
        }
body.page-index > *, body.page-index * { box-sizing: border-box; margin: 0; padding: 0; }
body.page-index { scroll-behavior: smooth; }
body.page-index, body.page-index { font-family: 'Vazirmatn', sans-serif; background: var(--bg); color: var(--text); line-height: 1.75; overflow-x: hidden; }
body.page-index a { text-decoration: none; color: inherit; transition: var(--transition); }
body.page-index img { max-width: 100%; height: auto; display: block; border-radius: inherit; }
body.page-index .container { max-width: 1280px; margin: 0 auto; padding: 0 1.2rem; }
body.page-index /* ===== HERO SECTION ===== */
        .hero {
            position: relative;
            padding: 3.5rem 0 2rem;
            overflow: hidden;
            background: var(--bg);
            border-bottom-left-radius: 2rem;
            border-bottom-right-radius: 2rem;
            min-height: auto;
            display: flex;
            align-items: center;
            box-shadow: 0 12px 35px rgba(114,9,183,.06);
            margin-bottom: 2rem;
            scroll-margin-top: 4.5rem;
        }
body.page-index /* Particles.js Container */
        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: 0.5;
        }
body.page-index /* Animated gradient background layers */
        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            background: linear-gradient(135deg, #fdf4ff 0%, #f0e8ff 35%, #e0f2fe 70%, #e0f7fa 100%);
            opacity: .92;
            animation: page-index-heroGlow 12s ease infinite;
        }
body.page-index .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            background: 
                radial-gradient(circle at 15% 30%, rgba(247,37,133,.12), transparent 40%),
                radial-gradient(circle at 85% 70%, rgba(67,97,238,.12), transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(76,201,240,.08), transparent 50%);
            pointer-events: none;
            animation: page-index-pulse 8s ease infinite;
        }
@keyframes page-index-heroGlow {
            0%, 100% { 
                background: linear-gradient(135deg, #fdf4ff 0%, #f0e8ff 35%, #e0f2fe 70%, #e0f7fa 100%); 
            }
            50% { 
                background: linear-gradient(135deg, #fef3f9 0%, #ede9ff 35%, #e0f3ff 70%, #e0fffa 100%); 
            }
        }
@keyframes page-index-pulse {
            0%, 100% { 
                opacity: .6; 
                transform: scale(1); 
            }
            50% { 
                opacity: 1; 
                transform: scale(1.05); 
            }
        }
body.page-index /* Content wrapper */
        .hero-content {
            position: relative;
            z-index: 3;
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
        }
body.page-index /* Main heading - Matching Support Page */
        .hero h1 {
            font-size: 1.6rem;
            font-weight: 800;
            margin-bottom: .6rem;
            letter-spacing: -0.5px;
            background: linear-gradient(90deg, var(--c1), var(--c3), var(--c8));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: page-index-titleFloat 4s ease-in-out infinite;
        }
@keyframes page-index-titleFloat {
            0%, 100% { 
                transform: translateY(0); 
            }
            50% { 
                transform: translateY(-6px); 
            }
        }
body.page-index .hero .tagline {
            font-size: 0.88rem; color: #5c6bc0; margin-bottom: 1rem; max-width: 520px; margin-left: auto; margin-right: auto;
            font-weight: 500; line-height: 1.7;
        }
body.page-index .hero .highlight { color: var(--c1); font-weight: 700; }
body.page-index .hero-actions {
            display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem;
        }
body.page-index .btn {
            padding: .4rem 1.2rem; border-radius: 9999px; font-weight: 700; font-size: .82rem;
            display: inline-flex; align-items: center; gap: .5rem; transition: var(--transition);
            cursor: pointer; white-space: nowrap; min-height: 44px;
        }
body.page-index .btn-primary {
            background: linear-gradient(135deg, var(--c1), var(--c3)); color: #fff;
            box-shadow: 0 8px 22px rgba(247,37,133,.28);
        }
body.page-index .btn-primary:hover {
            transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 30px rgba(247,37,133,.38);
        }
body.page-index .btn-outline {
            background: transparent; color: var(--c3); border: 2px solid var(--c3);
            backdrop-filter: blur(6px);
        }
body.page-index .btn-outline:hover {
            background: var(--c3); color: #fff; transform: translateY(-3px);
            box-shadow: 0 10px 24px rgba(114,9,183,.28);
        }
body.page-index .stats {
            display: flex; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; flex-wrap: wrap;
        }
body.page-index .stat {
            text-align: center; padding: .7rem 1.2rem; background: rgba(114,9,183,.07);
            border-radius: var(--radius-sm); min-width: 100px; transition: var(--transition);
        }
body.page-index .stat:hover { transform: translateY(-4px) scale(1.04); background: rgba(114,9,183,.14); }
body.page-index .stat-number { font-size: 1.6rem; font-weight: 800; color: var(--c3); }
body.page-index .stat-label { font-size: .82rem; color: #6366f1; font-weight: 600; margin-top: .15rem; }
body.page-index .divider {
            height: 3.5rem; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
        }
body.page-index .divider::before {
            content: ''; position: absolute; width: 55%; height: 2px;
            background: linear-gradient(90deg, transparent, var(--c1), var(--c3), var(--c8), transparent);
            border-radius: 3px; animation: page-index-flow 2.8s ease-in-out infinite;
        }
@keyframes page-index-flow { 0% { transform: translateX(-120%) scaleX(.6); opacity: .7; } 50% { transform: translateX(0) scaleX(1.3); opacity: 1; } 100% { transform: translateX(120%) scaleX(.6); opacity: .7; } }
body.page-index .section { padding: 4.5rem 0; }
body.page-index .bg-section {
            background: linear-gradient(to bottom, var(--gray-light), var(--white));
            border-radius: var(--radius); padding: 2.8rem; margin-bottom: 2.5rem;
            box-shadow: var(--shadow); position: relative; overflow: hidden;
        }
body.page-index .bg-section::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
            background: linear-gradient(90deg, var(--c1), var(--c3), var(--c8), var(--c10));
            border-radius: var(--radius) var(--radius) 0 0;
        }
body.page-index .section-title {
            font-size: 1.6rem; font-weight: 800; text-align: center; margin-bottom: 1.2rem;
            color: var(--c3); position: relative;
        }
body.page-index .section-desc {
            text-align: center; color: #5c6bc0; max-width: 720px; margin: 1.2rem auto 2.8rem;
            font-size: 0.95rem; line-height: 2;
        }
body.page-index /* Class Types Section - Professional & Attractive for Parents */
        .class-types {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            width: 100%;
            margin: 1rem 0;
        }
body.page-index .class-type-card {
            background: var(--white);
            border-radius: 12px;
            padding: 1rem 1.2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(114,9,183,.08);
            transition: var(--transition);
            border: 1px solid rgba(114,9,183,.08);
            direction: rtl;
            text-align: right;
        }
body.page-index .class-type-card:hover {
            box-shadow: 0 6px 20px rgba(114,9,183,.15);
            border-color: rgba(114,9,183,.2);
        }
body.page-index .class-type-icon {
            width: 42px;
            height: 42px;
            min-width: 42px;
            background: linear-gradient(135deg, var(--c1), var(--c3));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: white;
            box-shadow: 0 4px 12px rgba(247,37,133,.25);
        }
body.page-index .class-type-card:hover .class-type-icon {
            transform: scale(1.08);
        }
body.page-index .class-type-title {
            font-size: 0.92rem;
            font-weight: 700;
            color: var(--c3);
            margin-bottom: 0.2rem;
        }
body.page-index .class-type-desc {
            font-size: 0.78rem;
            color: #5c6bc0;
            line-height: 1.6;
            margin: 0;
        }
body.page-index .class-type-features {
            display: none;
        }
body.page-index .class-type-badge {
            display: none;
        }
body.page-index .class-type-content {
            flex: 1;
            min-width: 0;
        }
body.page-index /* استایل کارت‌های دوره از فایل courses-modern.css */
        
        /* تنظیمات بخش دوره‌ها در صفحه خانه */
        .courses-section {
            padding: 4rem 0 !important;
            background: linear-gradient(180deg, var(--white) 0%, var(--gray-light) 100%) !important;
        }
body.page-index .courses-section .section-title {
            font-size: 1.6rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--c1), var(--c3));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1.2rem;
        }
body.page-index .courses-section .section-desc {
            font-size: 0.95rem;
            color: var(--gray);
            margin-top: 1.2rem;
            margin-bottom: 4rem;
            padding-bottom: 15px;
        }
body.page-index .about-grid {
            display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.5rem; align-items: center;
        }
body.page-index .about-image {
            border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 30px rgba(114,9,183,.15);
            transform: perspective(1000px) rotateY(-3deg) scale(.97);
            transition: all .8s ease;
        }
body.page-index .about-image.aos-animate {
            transform: perspective(1000px) rotateY(0) scale(1);
        }
body.page-index .about-image img { transition: transform .9s ease; }
body.page-index .about-image:hover img { transform: scale(1.05); }
body.page-index .about-image:hover {
            transform: perspective(1000px) rotateY(0) translateY(-5px) scale(1.01);
            box-shadow: 0 18px 40px rgba(114,9,183,.22);
        }
body.page-index .about-text .lead {
            font-size: 0.9rem; margin-bottom: 1rem; color: var(--text); line-height: 1.7; font-weight: 500;
        }
body.page-index .features {
            display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 1rem 0;
        }
body.page-index .feature {
            background: rgba(114,9,183,.06); padding: 0.8rem; border-radius: var(--radius-sm);
            border-right: 4px solid var(--c3); transition: var(--transition);
        }
body.page-index .feature:hover {
            transform: translateX(-5px); background: rgba(114,9,183,.12);
            box-shadow: 0 8px 20px rgba(114,9,183,.12);
        }
body.page-index .feature h4 { font-size: 0.88rem; font-weight: 700; color: var(--c3); margin-bottom: .25rem; }
body.page-index .feature p { font-size: 0.78rem; }
body.page-index /* ===== Minimal Consultation Accordion ===== */
        .accordion {
            background: var(--white);
            border-radius: 20px;
            border: 1px solid rgba(114,9,183,.08);
            box-shadow: 0 4px 20px rgba(114,9,183,.05);
            overflow: hidden;
            margin: 0 auto 2rem;
            max-width: 640px;
            transition: var(--transition);
        }
body.page-index .accordion:hover {
            box-shadow: 0 8px 28px rgba(114,9,183,.08);
            border-color: rgba(114,9,183,.14);
        }
body.page-index .acc-header {
            padding: 1.25rem 1.75rem;
            background: var(--white);
            color: var(--gray-dark);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
        }
body.page-index .acc-header:hover { background: #fbfaff; }
body.page-index .acc-header h2 {
            font-size: 1.1rem;
            margin: 0;
            font-weight: 700;
            background: linear-gradient(90deg, var(--c1), var(--c3));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -.2px;
        }
body.page-index .acc-icon {
            font-size: 1rem;
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(114,9,183,.08);
            color: var(--c3);
            font-weight: 600;
            transition: transform .35s ease, background .3s ease;
        }
body.page-index .acc-header:hover .acc-icon { background: rgba(114,9,183,.14); }
body.page-index .acc-body {
            padding: 0 1.75rem 1.75rem;
            display: none;
            background: var(--white);
        }
body.page-index .acc-body.active { display: block; animation: page-index-slideDown .4s ease; }
@keyframes page-index-slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
body.page-index .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
body.page-index .input-group { position: relative; }
body.page-index .input-group input {
            width: 100%;
            padding: .85rem 1rem;
            border: 1px solid #eceaf3;
            border-radius: 12px;
            background: #fafafd;
            transition: var(--transition);
            font-size: .9rem;
            font-family: inherit;
            color: var(--gray-dark);
        }
body.page-index .input-group input::placeholder { color: #a8a4b8; font-size: .88rem; }
body.page-index .input-group input:hover { border-color: #ddd6ea; }
body.page-index .input-group input:focus {
            border-color: var(--c3);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(114,9,183,.08);
            outline: none;
        }
body.page-index .error { color: #ef4444; font-size: .78rem; margin-top: .35rem; display: block; }
body.page-index #consult-form .btn-primary {
            font-size: .9rem;
            padding: .75rem 1.4rem;
            border-radius: 12px;
            box-shadow: 0 6px 16px rgba(247,37,133,.22);
        }
body.page-index #consult-form .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(247,37,133,.32);
        }
body.page-index .alert {
            padding: 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.6rem;
            font-weight: 600; font-size: .98rem; border: 1px solid transparent;
        }
body.page-index .alert.success { background: rgba(6,214,160,.1); color: #0a7a56; border-color: rgba(6,214,160,.3); }
body.page-index .alert.danger { background: rgba(239,71,111,.1); color: #a11d3a; border-color: rgba(239,71,111,.3); }
body.page-index .comments-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem;
        }
body.page-index .comment {
            background: var(--white); padding: 1.9rem; border-radius: var(--radius);
            box-shadow: var(--shadow); border-right: 6px solid var(--c3); transition: var(--transition);
        }
body.page-index .comment:hover { transform: translateY(-8px); box-shadow: 0 16px 36px rgba(0,0,0,.14); }
body.page-index .comment-text {
            font-style: italic; margin-bottom: 1.4rem; color: var(--text);
            font-size: 1.02rem; line-height: 1.9; position: relative;
        }
body.page-index .comment-text::before { content: '“'; color: var(--c1); font-size: 2.2rem; position: absolute; top: -10px; right: -8px; }
body.page-index .comment-text::after { content: '”'; color: var(--c1); font-size: 2.2rem; position: absolute; bottom: -18px; left: -8px; }
body.page-index .comment-footer {
            display: flex; justify-content: space-between; font-size: .9rem; color: #5c6bc0; font-weight: 500;
        }
body.page-index .comment-form {
            background: var(--white); padding: 1.5rem 2.2rem; border-radius: var(--radius);
            box-shadow: var(--shadow); margin-top: 1.8rem;
        }
body.page-index .comment-form h3 { margin-bottom: .8rem; color: var(--c3); font-weight: 700; }
body.page-index .comment-form textarea {
            width: 100%; padding: 1.1rem; border: 1.5px solid #e2e8f0;
            border-radius: var(--radius-sm); resize: vertical; min-height: 130px;
            font-family: inherit; transition: var(--transition); font-size: .98rem;
        }
body.page-index .comment-form textarea:focus {
            border-color: var(--c3); box-shadow: 0 0 0 4px rgba(114,9,183,.16);
        }
@media (max-width: 992px) {
body.page-index .hero h1 { font-size: 1.4rem; }
body.page-index .about-grid, body.page-index .form-grid { grid-template-columns: 1fr; }
body.page-index .about-image { order: -1; transform: none; }
body.page-index .about-image:hover { transform: translateY(-10px); }
}
@media (max-width: 768px) {
body.page-index .hero { padding: 1.2rem 0 1.5rem; border-radius: 1.5rem; }
body.page-index .hero h1 { font-size: 1.3rem; }
body.page-index .hero .tagline { font-size: .82rem; }
body.page-index .hero-actions { flex-direction: column; align-items: center; gap: .5rem; }
body.page-index .btn { width: 100%; max-width: 260px; }
body.page-index .section-title { font-size: 1.4rem; }
body.page-index .course-grid { grid-template-columns: 1fr; }
body.page-index .class-types { gap: 0.6rem; }
body.page-index .class-type-card { padding: 0.8rem 1rem; }
body.page-index .class-type-icon { width: 36px; height: 36px; min-width: 36px; font-size: 1rem; }
body.page-index .class-type-title { font-size: 0.85rem; }
body.page-index .stats { gap: 1rem; }
body.page-index .stat-number { font-size: 1.4rem; }
}
@media (max-width: 480px) {
body.page-index .hero h1 { font-size: 1.2rem; }
body.page-index .section { padding: 3.5rem 0; }
body.page-index .stats { flex-direction: column; gap: .8rem; }
body.page-index .divider { height: 2.5rem; }
}
/* ---- Refined brand tokens (softened galaxy palette) -------------- */
    body.page-index {
        /* keep legacy var names alive but desaturated/premium */
        --c1:#ec4899; --c2:#d6409f; --c3:#7c3aed; --c4:#6d28d9; --c5:#5b21b6;
        --c6:#5145cd; --c7:#4f46e5; --c8:#4f6ef7; --c9:#5b9df9; --c10:#38bdf8;

        --brand:#6d28d9; --brand-strong:#5b21b6; --accent:#ec4899; --indigo:#4f6ef7;
        --ink:#1c1830; --ink-2:#454063; --muted:#6c6788;
        --page:#fbfaff; --surface:#ffffff; --surface-2:#f6f4fd; --surface-3:#f1eefb;
        --line:rgba(28,24,48,.09); --line-2:rgba(28,24,48,.06);

        --grad-brand:linear-gradient(135deg,#7c3aed 0%,#a855f7 45%,#ec4899 100%);
        --grad-text:linear-gradient(90deg,#ec4899,#7c3aed 55%,#4f6ef7);
        --ring:0 0 0 4px rgba(124,58,237,.16);

        --sh-xs:0 1px 2px rgba(28,24,48,.05);
        --sh-sm:0 4px 14px -6px rgba(45,30,90,.16);
        --sh-md:0 14px 36px -16px rgba(45,30,90,.24);
        --sh-lg:0 30px 70px -28px rgba(45,30,90,.34);

        --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:24px; --r-xl:30px;
        --ease:cubic-bezier(.22,.61,.36,1);
        --t-fast:.18s var(--ease); --t:.28s var(--ease);
        --space-section:clamp(3.25rem,6vw,5.5rem);
    }
[data-theme="dark"] body.page-index, [data-theme="dark"] body.page-index .dark-theme {
        --ink:#eceaf6; --ink-2:#c4c0d8; --muted:#9b96b6;
        --page:#0f0d1a; --surface:#17142a; --surface-2:#1d1936; --surface-3:#221d40;
        --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
    }
body.page-index /* ---- Base rhythm ------------------------------------------------- */
    body { background:var(--page); color:var(--ink); }
body.page-index main { overflow:hidden; }
body.page-index .container { max-width:1180px; padding-inline:1.25rem; }
body.page-index ::selection { background:rgba(124,58,237,.16); }
body.page-index /* ---- Section scaffolding ---------------------------------------- */
    .section { padding:var(--space-section) 0; }
body.page-index .courses-section { padding:var(--space-section) 0 !important;
        background:linear-gradient(180deg,var(--page),var(--surface-2)) !important; }
body.page-index .why-siblearn-section { background:var(--surface-2); }
body.page-index .section-title {
        font-size:clamp(1.5rem,1.15rem+1.5vw,2.1rem) !important;
        font-weight:800; line-height:1.3; letter-spacing:-.01em;
        color:var(--ink) !important; -webkit-text-fill-color:initial !important;
        background:none !important; text-align:center; margin:0 auto .5rem;
        max-width:22ch; position:relative;
    }
body.page-index .courses-section .section-title { color:var(--ink) !important;
        -webkit-text-fill-color:initial !important; background:none !important; }
body.page-index .section-desc, body.page-index .why-subtitle {
        text-align:center; color:var(--muted) !important; font-weight:450;
        font-size:clamp(.95rem,.9rem+.2vw,1.0625rem) !important; line-height:1.85 !important;
        max-width:58ch; margin:.85rem auto clamp(2rem,4vw,3rem) !important;
    }
body.page-index .why-subtitle strong { color:var(--ink); font-weight:700; }
body.page-index .why-subtitle { padding-bottom:15px; }
body.page-index /* refined divider — quiet, body.page-index premium */
    .divider { height:1px; margin:0 auto; max-width:1180px; background:none; }
body.page-index .divider::before { display:none; }
body.page-index .bg-section {
        background:var(--surface); border:1px solid var(--line);
        border-radius:var(--r-xl); box-shadow:var(--sh-sm);
        padding:clamp(1.5rem,4vw,3rem); }
body.page-index .bg-section::before { display:none; }
body.page-index /* ---- Buttons ----------------------------------------------------- */
    .btn {
        padding:.72rem 1.4rem; border-radius:999px; font-weight:700;
        font-size:.9375rem; line-height:1; min-height:46px; gap:.45rem;
        transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),color var(--t-fast);
    }
body.page-index .btn-primary {
        background:var(--grad-brand); color:#fff; border:none;
        box-shadow:0 10px 24px -10px rgba(124,58,237,.6);
    }
body.page-index .btn-primary:hover { transform:translateY(-2px);
        box-shadow:0 16px 30px -12px rgba(124,58,237,.65); }
body.page-index .hero-actions .btn-primary { position:relative; overflow:hidden; }
body.page-index .hero-actions .btn-primary::after {
        content:''; position:absolute; top:0; left:-120%; width:55%; height:100%;
        background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
        transform:skewX(-18deg); pointer-events:none;
    }
body.page-index .hero-actions .btn-primary:hover::after {
        animation:page-index-btnShimmer .9s var(--ease) forwards;
    }
@keyframes page-index-btnShimmer { to{ left:130%; } }
body.page-index /* ---- scroll cue ---------------------------------------------- */
    .hero-scroll { position:absolute; left:50%; bottom:1.1rem; z-index:4;
        transform:translateX(-50%); display:flex; flex-direction:column;
        align-items:center; gap:.45rem; color:var(--muted); text-decoration:none;
        font-size:.72rem; font-weight:600; opacity:.85;
        transition:opacity var(--t),color var(--t); }
body.page-index .hero-scroll:hover { opacity:1; color:var(--brand); }
body.page-index .hero-scroll__mouse { width:22px; height:36px; border-radius:12px;
        border:2px solid currentColor; display:grid; justify-items:center;
        padding-top:5px; }
body.page-index .hero-scroll__mouse span { width:3px; height:7px; border-radius:3px;
        background:currentColor; animation:page-index-scrollDot 1.6s var(--ease) infinite; }
@keyframes page-index-scrollDot { 0%{opacity:0;transform:translateY(-3px)}
        40%{opacity:1} 80%,100%{opacity:0;transform:translateY(7px)} }
@media (max-width:980px) {
body.page-index .hero-scroll { display:none; }
}
body.page-index .btn-outline {
        background:var(--surface); color:var(--brand);
        border:1px solid var(--line); backdrop-filter:none; font-weight:600;
    }
body.page-index .btn-outline:hover { background:var(--surface-2); color:var(--brand-strong);
        border-color:rgba(124,58,237,.3); transform:translateY(-2px); box-shadow:var(--sh-sm); }
body.page-index .btn:focus-visible, body.page-index a:focus-visible, body.page-index button:focus-visible { outline:none; box-shadow:var(--ring); }
body.page-index /* ================= HERO ========================================== */
    .hero {
        position:relative; overflow:hidden;
        padding:clamp(3rem,6vw,5.5rem) 0 clamp(3rem,6vw,5rem) !important;
        background:
            radial-gradient(130% 120% at 100% -10%,#f3edff 0%,transparent 52%),
            radial-gradient(120% 120% at 0% 0%,#fdeef7 0%,transparent 48%),
            var(--page) !important;
        border-radius:0 0 var(--r-xl) var(--r-xl);
        box-shadow:none; margin-bottom:0; min-height:auto; display:block;
    }
body.page-index /* living aurora mesh — slow GPU drift */
    .hero::before {
        content:''; position:absolute; inset:-12%; z-index:0; pointer-events:none;
        background:
            radial-gradient(38% 48% at 80% 10%,rgba(168,85,247,.30),transparent 60%),
            radial-gradient(34% 44% at 12% 22%,rgba(236,72,153,.22),transparent 60%),
            radial-gradient(42% 56% at 60% 100%,rgba(79,110,247,.20),transparent 60%);
        opacity:.95; will-change:transform;
        animation:page-index-auroraDrift 20s ease-in-out infinite alternate !important;
        -webkit-mask:none; mask:none;
    }
@keyframes page-index-auroraDrift {
        0%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); }
        50%{ transform:translate3d(2.5%,-2%,0) rotate(4deg) scale(1.08); }
        100%{ transform:translate3d(-2.5%,2%,0) rotate(-3deg) scale(1.05); }
    }
body.page-index /* quiet dot grid, body.page-index faded at edges */
    .hero::after {
        content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
        background-image:radial-gradient(rgba(124,58,237,.14) 1px,transparent 1.4px);
        background-size:30px 30px;
        -webkit-mask:radial-gradient(90% 80% at 50% 30%,#000,transparent 78%);
                mask:radial-gradient(90% 80% at 50% 30%,#000,transparent 78%);
        opacity:.45; animation:none !important; transform:none !important;
    }
body.page-index #particles-js { opacity:.3; z-index:0; }
body.page-index /* cursor-follow spotlight */
    .hero-spotlight { position:absolute; inset:0; z-index:1; pointer-events:none;
        background:radial-gradient(300px 300px at var(--mx,70%) var(--my,25%),
            rgba(124,58,237,.18),rgba(236,72,153,.10) 40%,transparent 68%);
        opacity:0; transition:opacity .45s var(--ease); mix-blend-mode:multiply; }
body.page-index .hero:hover .hero-spotlight { opacity:1; }
body.page-index .hero .container { position:relative; z-index:3; }
body.page-index /* ---- two-column architecture --------------------------------- */
    .hero-grid {
        display:grid; grid-template-columns:1.05fr .95fr;
        align-items:center; gap:clamp(2rem,5vw,4.5rem);
    }
body.page-index .hero-content { max-width:600px; text-align:right; margin:0; }
body.page-index .hero-eyebrow {
        display:inline-flex; align-items:center; gap:.5rem;
        padding:.42rem .9rem .42rem .75rem; margin:0 0 1.35rem; border-radius:999px;
        background:rgba(255,255,255,.7); border:1px solid var(--line);
        color:var(--ink-2); font-size:.8125rem; font-weight:600;
        box-shadow:var(--sh-xs); backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
    }
body.page-index .hero-eyebrow .dot { width:7px; height:7px; border-radius:50%; position:relative;
        background:var(--accent); }
body.page-index .hero-eyebrow .dot::after { content:''; position:absolute; inset:-4px; border-radius:50%;
        background:var(--accent); opacity:.35; animation:page-index-heroPing 2.4s var(--ease) infinite; }
@keyframes page-index-heroPing { 0%{transform:scale(.6);opacity:.5} 70%,100%{transform:scale(1.9);opacity:0} }
body.page-index .hero h1 {
        font-size:clamp(1.9rem,1.2rem+2.8vw,3.05rem) !important;
        font-weight:800; line-height:1.24; letter-spacing:-.025em;
        margin:0 0 1.1rem; color:var(--ink);
        background:none; -webkit-text-fill-color:initial; animation:none !important;
        text-wrap:balance;
    }
body.page-index .hero h1 .grad {
        background:linear-gradient(100deg,#7c3aed 0%,#ec4899 30%,#4f6ef7 60%,#a855f7 100%);
        background-size:220% auto;
        -webkit-background-clip:text; background-clip:text;
        -webkit-text-fill-color:transparent; color:transparent;
        animation:page-index-gradText 6s linear infinite;
    }
@keyframes page-index-gradText { to{ background-position:220% center; } }
body.page-index .hero .tagline {
        font-size:clamp(1rem,.95rem+.4vw,1.1875rem); color:var(--ink-2);
        max-width:48ch; margin:0 0 2rem; font-weight:450; line-height:1.85;
    }
body.page-index .hero .highlight { color:var(--brand); font-weight:700; }
body.page-index .hero-actions { display:flex; flex-wrap:wrap; justify-content:flex-start;
        gap:.8rem; margin:0; }
body.page-index .hero-actions .btn { min-width:158px; justify-content:center; }
body.page-index .hero-actions .btn-primary i { transition:transform var(--t-fast); }
body.page-index .hero-actions .btn-primary:hover i { transform:translateX(-4px); }
body.page-index /* ---- refined social proof (replaces metric strip) ------------ */
    .hero-proof { display:flex; align-items:center; gap:.85rem;
        margin-top:clamp(1.75rem,3.5vw,2.5rem); }
body.page-index .hero-avatars { display:flex; flex-direction:row-reverse; }
body.page-index .hero-avatars .av { width:38px; height:38px; border-radius:50%; margin-inline-start:-12px;
        border:2px solid var(--surface); background:var(--surface-3);
        display:grid; place-items:center; font-size:.95rem; box-shadow:var(--sh-xs);
        position:relative; }
body.page-index .hero-avatars .av:first-child { margin-inline-start:0; }
body.page-index .hero-avatars .av-1 { background:linear-gradient(135deg,#a855f7,#7c3aed); }
body.page-index .hero-avatars .av-2 { background:linear-gradient(135deg,#ec4899,#d6409f); }
body.page-index .hero-avatars .av-3 { background:linear-gradient(135deg,#4f6ef7,#5b9df9); }
body.page-index .hero-avatars .av-4 { background:var(--surface); color:var(--brand);
        font-size:.72rem; font-weight:800; }
body.page-index .hero-proof-text { display:flex; flex-direction:column; gap:.1rem; line-height:1.4; }
body.page-index .hero-proof .stars { color:#f5a623; font-size:.85rem; letter-spacing:1px; }
body.page-index .hero-proof .pt { font-size:.84rem; color:var(--muted); font-weight:500; }
body.page-index .hero-proof .pt b { color:var(--ink); font-weight:700; }
body.page-index /* ================= HERO VISUAL ================================= */
    .hero-visual { position:relative; z-index:3; min-height:420px;
        perspective:1200px; }
body.page-index .hero-orb { position:absolute; border-radius:50%; filter:blur(46px); z-index:0;
        will-change:transform; }
body.page-index .hero-orb.o1 { width:300px; height:300px; top:-40px; right:-30px;
        background:radial-gradient(circle,rgba(168,85,247,.5),transparent 70%);
        animation:page-index-heroFloat 9s var(--ease) infinite; }
body.page-index .hero-orb.o2 { width:240px; height:240px; bottom:-30px; left:-20px;
        background:radial-gradient(circle,rgba(236,72,153,.42),transparent 70%);
        animation:page-index-heroFloat 11s var(--ease) infinite reverse; }
body.page-index /* main glass course card */
    .hero-card-fx {
        position:relative; z-index:2; width:min(100%,380px); margin-inline:auto;
        transform-style:preserve-3d;
        animation:page-index-heroFloat 7s var(--ease) infinite;
    }
body.page-index .hero-card {
        position:relative; z-index:1; width:100%;
        background:var(--white); border:none;
        border-radius:var(--r-lg); box-shadow:var(--sh-lg);
        overflow:hidden; transform:translateZ(0);
        transition:transform .25s var(--ease);
    }
body.page-index .hero-card__media { position:relative; aspect-ratio:16/10;
        background:linear-gradient(135deg,#7c3aed 0%,#a855f7 40%,#ec4899 100%);
        overflow:hidden; }
body.page-index .hero-card__media img { position:absolute; inset:0; width:100%; height:100%;
        object-fit:cover; display:block; transition:transform .8s var(--ease); }
body.page-index .hero-card-fx:hover .hero-card__media img { transform:scale(1.06); }
body.page-index .hero-card__media::after { content:''; position:absolute; inset:0; z-index:1;
        background:linear-gradient(180deg,rgba(20,12,40,.05) 40%,rgba(20,12,40,.28)); }
body.page-index .hero-live { position:absolute; top:.8rem; right:.8rem; z-index:2;
        display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem;
        background:rgba(20,12,40,.55); color:#fff; font-size:.72rem; font-weight:700;
        border-radius:999px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
body.page-index .hero-live .ld { width:7px; height:7px; border-radius:50%; background:#22c55e;
        box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:page-index-liveBlink 1.6s ease infinite; }
@keyframes page-index-liveBlink { 0%,100%{opacity:1} 50%{opacity:.35} }
body.page-index .hero-card__body { padding:1.05rem 1.15rem 1.2rem; }
body.page-index .hero-card__cat { font-size:.74rem; font-weight:700; color:var(--accent);
        letter-spacing:.02em; }
body.page-index .hero-card__title { font-size:1.02rem; font-weight:800; color:var(--ink);
        margin:.3rem 0 .85rem; line-height:1.5; }
body.page-index .hero-prog { height:7px; border-radius:999px; background:var(--surface-3);
        overflow:hidden; }
body.page-index .hero-prog i { display:block; height:100%; width:72%;
        background:var(--grad-brand); border-radius:999px; }
body.page-index .hero-card__meta { display:flex; justify-content:space-between; align-items:center;
        margin-top:.65rem; font-size:.76rem; color:var(--muted); font-weight:600; }
body.page-index .hero-card__meta b { color:var(--ink); }
body.page-index /* floating mini badges */
    .hero-chip { position:absolute; z-index:3; display:inline-flex; align-items:center;
        gap:.55rem; padding:.6rem .85rem; border-radius:14px;
        background:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.9);
        box-shadow:var(--sh-md); backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px); font-size:.82rem; font-weight:700;
        color:var(--ink); }
body.page-index .hero-chip i { width:30px; height:30px; border-radius:9px; display:grid;
        place-items:center; color:#fff; font-size:.95rem; flex:none; }
body.page-index .hero-chip small { display:block; font-size:.7rem; font-weight:500; color:var(--muted); }
body.page-index .hero-chip.c1 { top:6%; left:-6%; animation:page-index-heroFloat 6.5s var(--ease) infinite; }
body.page-index .hero-chip.c1 i { background:linear-gradient(135deg,#22c55e,#16a34a); }
body.page-index .hero-chip.c2 { bottom:8%; right:-7%; animation:page-index-heroFloat 8s var(--ease) infinite reverse; }
body.page-index .hero-chip.c2 i { background:linear-gradient(135deg,#4f6ef7,#5b9df9); }
/* ---- Dark theme fixes: glass surfaces hard-coded to white ---- */
[data-theme="dark"] body.page-index .hero-eyebrow {
        background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12);
    }
[data-theme="dark"] body.page-index .hero-chip {
        background:rgba(23,20,42,.85); border-color:rgba(255,255,255,.12);
    }
@keyframes page-index-heroFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
body.page-index /* ================= COURSE CARDS (ultra-modern) ================== */
    .courses-section .section-title {
        background:none !important; -webkit-text-fill-color:initial !important;
        color:var(--ink) !important; }
body.page-index .course-grid { gap:clamp(1.3rem,2.6vw,1.9rem); perspective:1400px; }
body.page-index .courses-section .course-card {
        position:relative; isolation:isolate;
        background:
            radial-gradient(120% 120% at 100% 0%, rgba(124,58,237,.16), transparent 55%),
            radial-gradient(120% 120% at 0% 100%, rgba(236,72,153,.14), transparent 55%),
            rgba(255,255,255,.03) !important;
        border:1px solid rgba(124,58,237,.28) !important;
        border-radius:22px !important;
        box-shadow:0 24px 60px -24px rgba(124,58,237,.45) !important;
        -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
        overflow:hidden; display:flex; flex-direction:column;
        transform:translateY(0);
        transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease) !important;
        will-change:transform;
    }
body.page-index /* top gradient accent bar — always visible, matching FAQ/comments */
    .courses-section .course-card::before {
        content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:6;
        display:block !important; padding:0;
        background:linear-gradient(90deg, #ec4899, #7c3aed, #38bdf8);
        -webkit-mask:none; mask:none;
        transform:scaleX(1); transform-origin:right;
        transition:transform .5s var(--ease); pointer-events:none; }
body.page-index .courses-section .course-card:hover::before { opacity:1; animation:none; transform:scaleX(1); }
body.page-index /* soft radial glow in the top-left corner */
    .courses-section .course-card::after {
        content:'' !important; display:block !important;
        position:absolute; top:-60px; left:-60px;
        width:220px; height:220px; border-radius:50%;
        background:radial-gradient(circle, rgba(124,58,237,.35), transparent 70%);
        filter:blur(20px); pointer-events:none; z-index:0; }
body.page-index .courses-section .course-card:hover {
        transform:translateY(-8px);
        box-shadow:0 30px 55px -22px rgba(124,58,237,.55),0 12px 30px -18px rgba(236,72,153,.32) !important;
        border-color:rgba(124,58,237,.4) !important;
    }
body.page-index .courses-section .course-image {
        aspect-ratio:16/10; overflow:hidden; position:relative;
        border-radius:0 !important; margin:0; }
body.page-index .courses-section .course-image img {
        width:100%; height:100%; object-fit:cover; border-radius:inherit;
        transition:transform .8s var(--ease),filter .5s var(--ease) !important; }
body.page-index .courses-section .course-card:hover .course-image img {
        transform:scale(1.09) !important; filter:saturate(1.12) contrast(1.03); }
body.page-index .courses-section .course-image::after {
        content:''; position:absolute; inset:0; z-index:1;
        background:linear-gradient(180deg,transparent 40%,rgba(20,12,45,.46));
        opacity:1 !important; transition:opacity .5s var(--ease); }
body.page-index .courses-section .course-card:hover .course-image::after { opacity:.82 !important; }
body.page-index /* glossy shine sweep on hover */
    .courses-section .course-image::before {
        content:''; position:absolute; top:0; bottom:0; z-index:2; width:55%;
        left:-120%; pointer-events:none;
        background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
        transform:skewX(-18deg); transition:left .9s var(--ease); }
body.page-index .courses-section .course-card:hover .course-image::before { left:170%; }
body.page-index .courses-section .course-level {
        position:absolute; top:.7rem; right:.7rem; left:auto !important; z-index:3;
        width:auto !important; max-width:max-content;
        padding:.26rem .6rem .26rem .55rem !important; border-radius:999px !important;
        background:rgba(20,12,40,.42) !important; color:#fff !important;
        font-size:.68rem !important; font-weight:800 !important;
        backdrop-filter:blur(10px) saturate(1.5); -webkit-backdrop-filter:blur(10px) saturate(1.5);
        box-shadow:0 4px 12px -6px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.22);
        border:none !important; letter-spacing:.01em; transform:translateZ(40px);
        display:inline-flex; align-items:center; gap:.32rem; overflow:visible !important; }
body.page-index /* colored dot per level */
    .courses-section .course-level::before {
        content:''; display:inline-block !important; width:6px; height:6px; border-radius:50%;
        background:#a855f7; color:#a855f7; box-shadow:0 0 8px currentColor; }
body.page-index .courses-section .course-level.level-beginner::before { background:#22c55e; color:#22c55e; }
body.page-index .courses-section .course-level.level-intermediate::before { background:#f59e0b; color:#f59e0b; }
body.page-index .courses-section .course-level.level-advanced::before { background:#ec4899; color:#ec4899; }
body.page-index .courses-section .course-level.level-comprehensive::before { background:#4f6ef7; color:#4f6ef7; }
body.page-index .courses-section .course-level::after { display:none !important; }
body.page-index .courses-section .course-body {
        padding:1.05rem 1.1rem 1.15rem !important; display:flex; flex-direction:column;
        flex:1; gap:.5rem; position:relative; z-index:2; }
body.page-index .courses-section .course-body h3 {
        font-size:.48rem !important; font-weight:800 !important; line-height:1.5 !important;
        color:var(--ink) !important; margin:0 !important;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
        min-height:0; -webkit-text-fill-color:initial !important; background:none !important;
        transition:color .3s var(--ease); }
body.page-index .courses-section .course-card:hover .course-body h3 { color:var(--brand-strong) !important; }
body.page-index .courses-section .course-description {
        font-size:.8rem !important; color:var(--muted) !important; line-height:1.7 !important;
        margin:0 !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
        overflow:hidden; }
body.page-index .courses-section .course-footer {
        margin-top:auto !important; padding-top:.8rem !important; position:relative;
        border-top:none !important;
        display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
body.page-index /* gradient hairline above footer */
    .courses-section .course-footer::before {
        content:''; position:absolute; top:0; left:0; right:0; height:1px;
        background:linear-gradient(90deg,transparent,rgba(124,58,237,.25) 20%,rgba(236,72,153,.25) 80%,transparent); }
body.page-index .courses-section .course-price {
        display:flex; flex-direction:row; gap:.28rem;
        background:none !important; -webkit-text-fill-color:initial !important;
        -webkit-background-clip:border-box !important; background-clip:border-box !important;
        align-items:baseline !important; flex:0 0 auto !important; }
body.page-index .courses-section .course-price span {
        display:inline-block; width:fit-content;
        font-size:1rem !important; font-weight:900 !important; line-height:1.15;
        background:var(--grad-brand) !important; background-size:200% auto;
        -webkit-background-clip:text !important; background-clip:text !important;
        -webkit-text-fill-color:transparent !important; color:transparent !important;
        letter-spacing:-.01em; transition:background-position .5s var(--ease); }
body.page-index .courses-section .course-card:hover .course-price span { background-position:right center; }
body.page-index .courses-section .course-price small { font-size:.66rem !important; color:var(--muted) !important; font-weight:600; }
body.page-index .courses-section .course-card .btn-primary {
        position:relative; overflow:hidden;
        background:linear-gradient(135deg,#7c3aed,#a855f7 50%,#ec4899) !important; color:#fff !important;
        border:1px solid rgba(255,255,255,.18) !important;
        height:auto !important; min-width:0 !important; line-height:1;
        padding:.6rem 1.05rem !important; border-radius:9px !important;
        font-size:.82rem !important; font-weight:700 !important; letter-spacing:.01em;
        box-shadow:0 6px 16px -8px rgba(124,58,237,.7),inset 0 1px 1px rgba(255,255,255,.35) !important;
        transition:transform var(--t-fast),box-shadow .25s var(--ease),filter .25s var(--ease) !important;
        display:inline-flex; align-items:center; justify-content:center; gap:.3rem; }
body.page-index .courses-section .course-card .btn-primary::before {
        content:''; position:absolute; top:0; bottom:0; left:-120%; width:60%; display:block !important;
        background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
        transform:skewX(-18deg); transition:left .7s var(--ease); }
body.page-index .courses-section .course-card .btn-primary:hover {
        transform:translateY(-2px) !important; filter:brightness(1.05);
        box-shadow:0 12px 22px -8px rgba(124,58,237,.85),inset 0 1px 1px rgba(255,255,255,.4) !important; }
body.page-index .courses-section .course-card .btn-primary:hover::before { left:160%; }
body.page-index .courses-section .course-card .btn-primary i { font-size:.9em; transition:transform .25s var(--ease); }
body.page-index .courses-section .course-card .btn-primary:hover i { transform:translateX(-3px); }
body.page-index .courses-section .discount-ribbon {
        top:.7rem !important; left:.7rem !important; right:auto !important; z-index:4;
        background:linear-gradient(135deg,#fb7185 0%,#ec4899 55%,#d946ef 100%) !important;
        color:#fff !important; overflow:hidden;
        padding:.34rem .55rem !important; border-radius:12px !important;
        line-height:1; min-width:0 !important;
        box-shadow:0 8px 18px -8px rgba(236,72,153,.7),inset 0 1px 1px rgba(255,255,255,.4) !important;
        transform:none !important; width:auto !important; height:auto !important;
        display:inline-flex; flex-direction:column; align-items:center; gap:.04rem; letter-spacing:.02em;
        text-shadow:0 1px 1px rgba(120,10,60,.4);
        animation:none !important; }
body.page-index .courses-section .discount-ribbon span {
        font-size:.82rem !important; font-weight:900 !important; line-height:1; }
body.page-index .courses-section .discount-ribbon small {
        font-size:.52rem !important; font-weight:700 !important; line-height:1;
        opacity:.92; letter-spacing:.06em; }
body.page-index /* glossy moving shine across the badge */
    .courses-section .discount-ribbon::before {
        content:''; position:absolute !important; top:0; bottom:0; left:-130%; width:55%;
        display:block !important; background:none;
        background-image:linear-gradient(105deg,transparent,rgba(255,255,255,.65),transparent) !important;
        transform:skewX(-20deg); animation:page-index-ribbonShine 3.4s var(--ease) infinite; }
body.page-index .courses-section .discount-ribbon::after { display:none !important; }
@keyframes page-index-ribbonShine { 0%{ left:-130%; } 55%,100%{ left:170%; } }
@keyframes page-index-ribbonPulse {
        0%,100%{ filter:brightness(1); transform:translateZ(40px) scale(1); }
        50%{ filter:brightness(1.1); transform:translateZ(40px) scale(1.04); } }
body.page-index .no-courses-message { text-align:center; color:var(--muted); padding:2rem 0; }
@media (hover:none) {
body.page-index .courses-section .course-card { transform:none !important; }
body.page-index .courses-section .course-card::before { opacity:1; }
}
body.page-index /* ================= CLASS TYPES ================================== */
    .class-type-card {
        background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
        box-shadow:var(--sh-xs); padding:1.1rem 1.25rem;
        transition:transform var(--t),box-shadow var(--t),border-color var(--t); }
body.page-index .class-type-card:hover { transform:translateY(-3px); box-shadow:var(--sh-sm);
        border-color:rgba(124,58,237,.25); }
body.page-index .class-type-icon {
        width:46px; height:46px; min-width:46px; border-radius:14px;
        background:var(--surface-3); color:var(--brand);
        box-shadow:none; font-size:1.25rem; }
body.page-index .class-type-card:hover .class-type-icon { transform:none; background:rgba(124,58,237,.12); }
body.page-index .class-type-title { font-size:.98rem; font-weight:700; color:var(--ink); }
body.page-index .class-type-desc { font-size:.82rem; color:var(--muted); line-height:1.7; }
body.page-index /* ================= WHY SIBLEARN ================================= */
    .why-siblearn-section .why-grid {
        display:grid; grid-template-columns:repeat(4,1fr);
        gap:clamp(1rem,1.6vw,1.5rem); }
body.page-index .why-siblearn-section .container { max-width:100%; padding-inline:clamp(1.5rem,5vw,4.5rem); }
body.page-index .why-siblearn-section .why-card {
        position:relative; overflow:hidden;
        background:var(--surface); border:1px solid var(--line); border-radius:22px;
        padding:1.8rem 1.5rem; text-align:center; box-shadow:var(--sh-xs);
        transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease); }
/* playful decorative blob in the corner of each card */
body.page-index .why-siblearn-section .why-card::before {
        content:''; position:absolute; top:-40px; inset-inline-start:-40px;
        width:120px; height:120px; border-radius:50%;
        background:var(--_tint,rgba(124,58,237,.14)); filter:blur(6px);
        opacity:.55; transition:transform .45s var(--ease),opacity .45s var(--ease);
        pointer-events:none; z-index:0; }
body.page-index .why-siblearn-section .why-card:hover { transform:translateY(-6px);
        box-shadow:0 24px 44px -26px rgba(124,58,237,.4); border-color:var(--_tint,rgba(124,58,237,.35)); }
body.page-index .why-siblearn-section .why-card:hover::before { transform:scale(1.35); opacity:.8; }
body.page-index .why-siblearn-section .why-card > * { position:relative; z-index:1; }
body.page-index .why-siblearn-section .why-icon {
        width:64px; height:64px; margin:0 auto 1.1rem;
        display:flex; align-items:center; justify-content:center; font-size:1.7rem;
        color:#fff; box-shadow:0 12px 26px -10px var(--_shadow,rgba(124,58,237,.55));
        transition:transform .4s var(--ease); }
body.page-index .why-siblearn-section .why-card:hover .why-icon { transform:translateY(-3px) rotate(-6deg); }
/* ---- per-card color + organic (blob) icon shapes ---- */
body.page-index .why-siblearn-section .why-card:nth-child(1) {
        --_tint:rgba(124,58,237,.16); --_shadow:rgba(124,58,237,.55); }
body.page-index .why-siblearn-section .why-card:nth-child(1) .why-icon {
        background:linear-gradient(135deg,#7c3aed,#a855f7);
        border-radius:42% 58% 60% 40% / 45% 45% 55% 55%; }
body.page-index .why-siblearn-section .why-card:nth-child(2) {
        --_tint:rgba(236,72,153,.16); --_shadow:rgba(236,72,153,.5); }
body.page-index .why-siblearn-section .why-card:nth-child(2) .why-icon {
        background:linear-gradient(135deg,#ec4899,#f472b6);
        border-radius:58% 42% 40% 60% / 55% 55% 45% 45%; }
body.page-index .why-siblearn-section .why-card:nth-child(3) {
        --_tint:rgba(59,130,246,.16); --_shadow:rgba(59,130,246,.5); }
body.page-index .why-siblearn-section .why-card:nth-child(3) .why-icon {
        background:linear-gradient(135deg,#3b82f6,#60a5fa);
        border-radius:50% 50% 42% 58% / 58% 42% 50% 50%; }
body.page-index .why-siblearn-section .why-card:nth-child(4) {
        --_tint:rgba(20,184,166,.16); --_shadow:rgba(20,184,166,.5); }
body.page-index .why-siblearn-section .why-card:nth-child(4) .why-icon {
        background:linear-gradient(135deg,#14b8a6,#2dd4bf);
        border-radius:45% 55% 55% 45% / 42% 58% 42% 58%; }
body.page-index .why-siblearn-section .why-card h4 {
        font-size:1.05rem; font-weight:700; color:var(--ink); margin:0 0 .4rem; }
body.page-index .why-siblearn-section .why-card p {
        font-size:.85rem; color:var(--muted); line-height:1.7; margin:0; }
body.page-index .why-cta { text-align:center; margin-top:clamp(2rem,4vw,2.75rem); }
body.page-index /* ================= CONSULTATION ================================= */
    .accordion { border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
body.page-index .acc-header h2 { background:none; -webkit-text-fill-color:initial; color:var(--ink);
        font-size:1.0625rem; }
body.page-index .acc-icon { background:var(--surface-3); color:var(--brand); }
body.page-index .input-group input { border-radius:var(--r-xs); background:var(--surface-2);
        border:1px solid var(--line); }
body.page-index .input-group input:focus { border-color:var(--brand); background:var(--surface);
        box-shadow:var(--ring); }
body.page-index #consult-form .btn-primary { border-radius:var(--r-xs); box-shadow:none; }
body.page-index /* ================= COMMENTS ===================================== */
    #comments-section .bg-section { background:var(--surface); }
/* ================= MOTION / A11Y ================================ */
    @media (prefers-reduced-motion:reduce) {
        body.page-index *,body.page-index *::before,body.page-index *::after{ animation:none !important; transition:none !important; }
        body.page-index [data-aos]{ opacity:1 !important; transform:none !important; }
    }
/* ================= RESPONSIVE =================================== */
    @media (max-width:980px) {
        body.page-index .hero-grid{ grid-template-columns:1fr; gap:clamp(2.5rem,6vw,3.5rem); text-align:center; }
        body.page-index .hero-content{ max-width:640px; margin-inline:auto; text-align:center; }
        body.page-index .hero .tagline{ margin-inline:auto; }
        body.page-index .hero-actions{ justify-content:center; }
        body.page-index .hero-proof{ justify-content:center; }
        body.page-index .hero-visual{ min-height:380px; order:2; }
        body.page-index .why-siblearn-section .why-grid{ grid-template-columns:repeat(2,1fr); }
    }
@media (max-width:768px) {
body.page-index .hero h1 { font-size:clamp(1.7rem,6vw,2.1rem) !important; }
body.page-index .hero-actions { flex-direction:row; }
body.page-index .hero-actions .btn { flex:1; min-width:0; max-width:none; width:auto; }
body.page-index .hero-chip { font-size:.76rem; padding:.5rem .7rem; }
}
@media (max-width:560px) {
body.page-index .hero-actions { flex-direction:column; }
body.page-index .hero-actions .btn { width:100%; }
body.page-index .course-grid { grid-template-columns:1fr; }
body.page-index .hero-visual { min-height:340px; }
body.page-index .hero-card-fx { width:min(100%,320px); }
body.page-index .hero-chip.c1 { left:0; }
body.page-index .hero-chip.c2 { right:0; }
body.page-index .hero-proof { flex-wrap:wrap; }
}
body.page-index /* ---- soft luxury page wash for depth & cohesion ---------------- */
    body {
        background:
            radial-gradient(1100px 540px at 100% -8%,rgba(168,85,247,.07),transparent 60%),
            radial-gradient(950px 520px at -6% 12%,rgba(236,72,153,.06),transparent 58%),
            var(--page);
        background-attachment:fixed;
    }
body.page-index /* ---- unified section headings (gradient kicker under title) ---- */
    .section-title { margin-bottom:.65rem !important; }
body.page-index .section-title::after {
        content:''; display:block; width:54px; height:4px; margin:.85rem auto 0;
        border-radius:999px;
        background:linear-gradient(90deg,#7c3aed,#ec4899 55%,#4f6ef7);
        box-shadow:0 4px 12px -4px rgba(124,58,237,.55);
    }
body.page-index /* keep the courses heading consistent too */
    .courses-section .section-title::after { opacity:1; }
body.page-index /* ---- elegant dividers: faint gradient line + center node ------- */
    .divider { position:relative; height:clamp(1.75rem,4vw,3rem) !important; }
body.page-index .divider::before {
        display:block !important; content:''; position:absolute;
        top:50%; left:50%; transform:translate(-50%,-50%);
        width:min(560px,72%); height:1px;
        background:linear-gradient(90deg,transparent,rgba(124,58,237,.28) 25%,rgba(236,72,153,.28) 75%,transparent);
    }
body.page-index .divider::after {
        content:''; position:absolute; top:50%; left:50%;
        width:7px; height:7px; border-radius:50%;
        transform:translate(-50%,-50%) rotate(45deg);
        background:linear-gradient(135deg,#7c3aed,#ec4899);
        box-shadow:0 0 0 5px var(--page),0 6px 16px -4px rgba(124,58,237,.55);
    }
body.page-index /* ---- richer framed surfaces (class-types & comments) ---------- */
    .bg-section {
        position:relative; overflow:hidden;
        background:linear-gradient(180deg,var(--surface),var(--surface-2)) !important;
        border:1px solid var(--line) !important;
        border-radius:var(--r-xl) !important;
        box-shadow:0 30px 70px -40px rgba(45,30,90,.45),inset 0 1px 0 rgba(255,255,255,.65) !important;
        padding:clamp(1.75rem,4vw,3.25rem) !important;
    }
body.page-index .bg-section::before {
        display:block !important; content:''; position:absolute; inset:0 0 auto 0;
        height:3px; background:linear-gradient(90deg,transparent,#7c3aed,#ec4899,#4f6ef7,transparent);
        opacity:.9;
    }
body.page-index /* ================= CLASS TYPES → premium responsive grid ======== */
    #class-types .class-types {
        display:grid !important; grid-template-columns:repeat(2,1fr);
        gap:clamp(.9rem,2vw,1.25rem) !important; margin:1.25rem 0 0 !important;
    }
body.page-index #class-types .class-type-card {
        position:relative; overflow:hidden; flex-direction:row;
        background:var(--surface) !important;
        border:1px solid var(--line) !important; border-radius:var(--r-lg) !important;
        padding:1.25rem 1.25rem !important;
        box-shadow:0 10px 30px -22px rgba(45,30,90,.5) !important;
        transition:transform var(--t),box-shadow var(--t),border-color var(--t) !important;
    }
body.page-index #class-types .class-type-card::before {
        content:''; position:absolute; top:0; right:0; left:0; height:3px;
        background:linear-gradient(90deg,#7c3aed,#ec4899);
        transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
    }
body.page-index #class-types .class-type-card:hover {
        transform:translateY(-5px) !important;
        box-shadow:0 26px 48px -26px rgba(124,58,237,.5) !important;
        border-color:transparent !important;
    }
body.page-index #class-types .class-type-card:hover::before { transform:scaleX(1); }
body.page-index #class-types .class-type-icon {
        width:50px !important; height:50px !important; min-width:50px !important;
        border-radius:15px !important; font-size:1.35rem !important;
        background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(236,72,153,.14)) !important;
        color:var(--brand) !important;
        box-shadow:inset 0 0 0 1px rgba(124,58,237,.12) !important;
        transition:transform var(--t),background var(--t),color var(--t) !important;
    }
body.page-index #class-types .class-type-card:hover .class-type-icon {
        background:var(--grad-brand) !important; color:#fff !important;
        transform:translateY(-2px) rotate(-4deg) !important;
    }
body.page-index #class-types .class-type-title { font-size:1.02rem !important; }
body.page-index #class-types .class-type-desc { font-size:.84rem !important; color:var(--muted) !important; }
body.page-index /* ================= WHY SIBLEARN cards → luxe ==================== */
    .why-siblearn-section .why-card {
        position:relative; overflow:hidden;
        background:linear-gradient(180deg,var(--surface),var(--surface-2)) !important;
        border-radius:var(--r-lg) !important;
        box-shadow:0 12px 34px -24px rgba(45,30,90,.5) !important;
    }
body.page-index .why-siblearn-section .why-card::before {
        content:''; position:absolute; top:0; right:0; left:0; height:3px;
        background:linear-gradient(90deg,#7c3aed,#ec4899,#4f6ef7);
        transform:scaleX(0); transition:transform .5s var(--ease);
    }
body.page-index .why-siblearn-section .why-card:hover {
        transform:translateY(-6px) !important;
        box-shadow:0 30px 54px -28px rgba(124,58,237,.5) !important;
        border-color:transparent !important;
    }
body.page-index .why-siblearn-section .why-card:hover::before { transform:scaleX(1); }
body.page-index .why-siblearn-section .why-icon {
        background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(236,72,153,.14)) !important;
        color:var(--brand) !important;
        box-shadow:inset 0 0 0 1px rgba(124,58,237,.12) !important;
        transition:transform var(--t),background var(--t),color var(--t) !important;
    }
body.page-index .why-siblearn-section .why-card:hover .why-icon {
        background:var(--grad-brand) !important; color:#fff !important;
        transform:translateY(-3px) scale(1.05) !important;
    }
body.page-index /* ================= CONSULTATION accordion → luxe ================ */
    #consultation .accordion {
        position:relative; overflow:hidden;
        background:linear-gradient(180deg,var(--surface),var(--surface-2)) !important;
        border:1px solid var(--line) !important; border-radius:var(--r-xl) !important;
        box-shadow:0 26px 60px -38px rgba(45,30,90,.45),inset 0 1px 0 rgba(255,255,255,.6) !important;
    }
body.page-index #consultation .accordion::before {
        content:''; position:absolute; top:0; right:0; left:0; height:3px;
        background:linear-gradient(90deg,transparent,#7c3aed,#ec4899,#4f6ef7,transparent);
    }
body.page-index #consultation .acc-header { padding:1.15rem 1.4rem !important; }
body.page-index #consultation .acc-icon {
        background:var(--grad-brand) !important; color:#fff !important;
        box-shadow:0 8px 18px -10px rgba(124,58,237,.7) !important;
    }
body.page-index #consultation .input-group input {
        border-radius:var(--r-sm) !important; padding:.85rem 1rem !important;
        transition:border-color var(--t),box-shadow var(--t),background var(--t) !important;
    }
body.page-index /* ================= COMMENTS → refined ========================== */
    #comments-section .comment-card {
        background:linear-gradient(180deg,var(--surface),var(--surface-2)) !important;
        border:1px solid var(--line) !important; border-radius:var(--r-lg) !important;
        box-shadow:0 12px 32px -24px rgba(45,30,90,.5) !important;
        transition:transform var(--t),box-shadow var(--t),border-color var(--t) !important;
    }
body.page-index #comments-section .comment-card:hover {
        transform:translateY(-4px) !important;
        box-shadow:0 26px 48px -28px rgba(124,58,237,.45) !important;
        border-color:rgba(124,58,237,.2) !important;
    }
body.page-index #comments-section .comment-avatar-default, body.page-index #comments-section .reply-avatar-default {
        background:var(--grad-brand) !important; color:#fff !important;
        font-weight:800 !important; box-shadow:0 8px 18px -10px rgba(124,58,237,.6) !important;
    }
body.page-index #comments-section .comment-form {
        background:linear-gradient(180deg,var(--surface-2),var(--surface-3)) !important;
        border:1px solid var(--line) !important; border-radius:var(--r-lg) !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.6) !important;
    }
body.page-index #comments-section .comment-form textarea {
        border-radius:var(--r-sm) !important;
        transition:border-color var(--t),box-shadow var(--t) !important;
    }
body.page-index #comments-section .comment-form textarea:focus {
        border-color:var(--brand) !important; box-shadow:var(--ring) !important;
    }
/* ---- responsive: class-types grid collapses gracefully -------- */
    @media (max-width:820px) {
        body.page-index #class-types .class-types{ grid-template-columns:1fr !important; }
    }
/* ---- honor reduced motion (decorative accents become static) -- */
    @media (prefers-reduced-motion:reduce) {
        body.page-index #class-types .class-type-card::before,
        body.page-index .why-siblearn-section .why-card::before{ transform:scaleX(1) !important; }
    }
body.page-index /* ================================================================ */
    /*  Full-bleed containers + smaller headings (user request)         */
    /* ================================================================ */
    /* all main containers stretch to the user's screen, body.page-index not centered */
    .container {
        max-width:100% !important; width:100% !important;
        margin-inline:0 !important;
        padding-inline:clamp(1rem,4vw,3.5rem) !important;
    }
body.page-index .divider { max-width:none !important; }
body.page-index /* smaller, body.page-index tighter section headings */
    .section-title {
        font-size:clamp(1.15rem,.95rem+.85vw,1.55rem) !important;
        margin-bottom:.5rem !important; max-width:none !important;
    }
body.page-index .section-title::after { width:46px; height:3px; margin-top:.7rem; }
body.page-index .section-desc, body.page-index .why-subtitle {
        font-size:clamp(.84rem,.8rem+.2vw,.96rem) !important;
        margin-bottom:clamp(1.4rem,3vw,2.3rem) !important; max-width:60ch !important;
    }
body.page-index /* hero headline a touch smaller too */
    .hero h1 { font-size:clamp(1.55rem,1.05rem+2.1vw,2.5rem) !important; }
body.page-index .hero .tagline { font-size:clamp(.95rem,.9rem+.3vw,1.08rem) !important; }
body.page-index .faq-section {
                    position: relative;
                    overflow: hidden;
                }
body.page-index .faq-section::before {
                    content: '';
                    position: absolute;
                    top: -150px;
                    right: -150px;
                    width: 400px;
                    height: 400px;
                    background: radial-gradient(circle, rgba(247,37,133,0.08), transparent 70%);
                    border-radius: 50%;
                    pointer-events: none;
                }
body.page-index .faq-section::after {
                    content: '';
                    position: absolute;
                    bottom: -150px;
                    left: -150px;
                    width: 400px;
                    height: 400px;
                    background: radial-gradient(circle, rgba(67,97,238,0.08), transparent 70%);
                    border-radius: 50%;
                    pointer-events: none;
                }
body.page-index .faq-wrapper {
                    position: relative;
                    z-index: 1;
                    counter-reset: faq;
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
                    gap: 0.7rem;
                    align-items: start;
                }
body.page-index .faq-item {
                    counter-increment: faq;
                    background: linear-gradient(135deg, var(--white), var(--gray-light));
                    border: 1px solid rgba(114, 9, 183, 0.08);
                    border-radius: 14px;
                    margin-bottom: 0;
                    overflow: hidden;
                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                    box-shadow: 0 4px 18px rgba(58, 12, 163, 0.04);
                }
body.page-index .faq-item:hover {
                    border-color: rgba(114, 9, 183, 0.2);
                    box-shadow: 0 8px 30px rgba(58, 12, 163, 0.08);
                    transform: translateY(-2px);
                }
body.page-index .faq-item.is-open {
                    border-color: rgba(124, 58, 237, 0.28);
                    box-shadow: 0 12px 40px -16px rgba(124, 58, 237, 0.22);
                    background: linear-gradient(135deg, var(--surface), var(--surface-2));
                }
body.page-index .faq-question {
                    width: 100%;
                    background: transparent;
                    border: none;
                    padding: 0.95rem 1.2rem;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 0.7rem;
                    cursor: pointer;
                    font-family: inherit;
                    text-align: right;
                    transition: padding 0.3s ease;
                }
body.page-index .faq-question:hover {
                    padding-right: 1.55rem;
                }
body.page-index .faq-q-text {
                    font-weight: 700;
                    font-size: 0.92rem;
                    color: var(--ink);
                    line-height: 1.7;
                    flex: 1;
                    margin: 0;
                    display: flex;
                    align-items: center;
                    gap: 0.55rem;
                    transition: color 0.3s ease;
                }
body.page-index /* creative gradient number badge (Persian digits) */
                .faq-q-text::before {
                    content: counter(faq, arabic-indic);
                    flex: none;
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    display: grid;
                    place-items: center;
                    font-size: 0.74rem;
                    font-weight: 800;
                    color: #fff;
                    -webkit-text-fill-color: #fff;
                    background: linear-gradient(135deg, var(--accent), var(--brand));
                    box-shadow: 0 6px 14px -6px rgba(124, 58, 237, 0.6);
                    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
                }
body.page-index .faq-item.is-open .faq-q-text::before {
                    transform: scale(1.08) rotate(-6deg);
                }
body.page-index .faq-item.is-open .faq-q-text {
                    background: linear-gradient(90deg, var(--accent), var(--brand));
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }
body.page-index .faq-icon {
                    flex-shrink: 0;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background: linear-gradient(135deg, var(--accent), var(--brand));
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    font-size: 1.1rem;
                    font-weight: 300;
                    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
                    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
                }
body.page-index .faq-item.is-open .faq-icon {
                    transform: rotate(135deg);
                    box-shadow: 0 6px 20px rgba(247, 37, 133, 0.5);
                }
body.page-index .faq-answer {
                    max-height: 0;
                    opacity: 0;
                    overflow: hidden;
                    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, padding 0.4s ease;
                    padding: 0 1.2rem;
                }
body.page-index .faq-item.is-open .faq-answer {
                    max-height: 500px;
                    opacity: 1;
                    padding: 0 1.2rem 1.15rem;
                }
body.page-index .faq-answer-inner {
                    border-top: 1px dashed rgba(114, 9, 183, 0.15);
                    padding-top: 1rem;
                    line-height: 1.9;
                    color: var(--ink-2);
                    font-size: 0.88rem;
                }
body.page-index .faq-answer-inner p {
                    margin: 0;
                }
@media (max-width: 600px) {
body.page-index .faq-question { padding: 1.1rem 1.25rem; }
body.page-index .faq-q-text { font-size: 0.95rem; }
body.page-index .faq-icon { width: 32px; height: 32px; font-size: 1.2rem; }
body.page-index .faq-item.is-open .faq-answer { padding: 0 1.25rem 1.25rem; }
}
body.page-index /* ---- carousel scaffold ---- */
                    #comments-section .testi { position:relative; margin-top:clamp(1.1rem,3vw,1.9rem); }
body.page-index #comments-section .testi-viewport { overflow:hidden; padding:.5rem; margin:-.5rem; }
body.page-index #comments-section .testi .comments-list.testi-track {
                        display:flex !important; flex-direction:row !important;
                        gap:clamp(.8rem,2vw,1.15rem) !important; direction:ltr;
                        margin:0 !important; align-items:stretch;
                        transition:transform .6s cubic-bezier(.22,.61,.36,1); will-change:transform;
                    }
body.page-index /* visible cards per breakpoint */
                    #comments-section .testi-track { --vis:3; --tgap:clamp(.8rem,2vw,1.15rem); }
@media (max-width:992px) {
body.page-index #comments-section .testi-track { --vis:2; }
}
@media (max-width:640px) {
body.page-index #comments-section .testi-track { --vis:1; }
}
body.page-index /* ---- minimal, body.page-index elegant testimonial card ---- */
                    #comments-section .testi-track .comment-card {
                        flex:0 0 calc((100% - (var(--vis) - 1) * var(--tgap)) / var(--vis)) !important;
                        direction:rtl; position:relative; isolation:isolate;
                        display:flex !important; flex-direction:column; gap:.7rem;
                        background:linear-gradient(180deg,var(--surface),var(--surface-2)) !important;
                        border:1px solid var(--line) !important; border-radius:18px !important;
                        padding:1.15rem 1.2rem 1.05rem !important; margin:0 !important;
                        box-shadow:0 10px 30px -22px rgba(45,30,90,.5) !important;
                        transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease) !important;
                    }
body.page-index #comments-section .testi-track .comment-card:hover {
                        transform:translateY(-5px) !important;
                        box-shadow:0 26px 46px -26px rgba(124,58,237,.45) !important;
                        border-color:rgba(124,58,237,.22) !important;
                    }
/* ---- Per-card color tint (blue / purple / pink spectrum) ---- */
body.page-index #comments-section .testi-track .comment-card:nth-child(3n+1) {
                        background:linear-gradient(180deg,rgba(79,110,247,.12),rgba(79,110,247,.05)),linear-gradient(180deg,var(--surface),var(--surface-2)) !important;
                        border-color:rgba(79,110,247,.30) !important;
                    }
body.page-index #comments-section .testi-track .comment-card:nth-child(3n+2) {
                        background:linear-gradient(180deg,rgba(147,51,234,.12),rgba(147,51,234,.05)),linear-gradient(180deg,var(--surface),var(--surface-2)) !important;
                        border-color:rgba(147,51,234,.30) !important;
                    }
body.page-index #comments-section .testi-track .comment-card:nth-child(3n+3) {
                        background:linear-gradient(180deg,rgba(236,72,153,.12),rgba(236,72,153,.05)),linear-gradient(180deg,var(--surface),var(--surface-2)) !important;
                        border-color:rgba(236,72,153,.30) !important;
                    }
body.page-index /* creative gradient quote glyph */
                    #comments-section .testi-track .comment-card::before {
                        content:'\201D'; position:absolute; top:.15rem; left:.95rem; z-index:0;
                        font-family:Georgia,'Times New Roman',serif; font-size:3.6rem; line-height:1; font-weight:700;
                        background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
                        -webkit-text-fill-color:transparent; color:transparent; opacity:.16; pointer-events:none;
                    }
body.page-index /* hairline reveal on hover */
                    #comments-section .testi-track .comment-card::after {
                        content:''; position:absolute; top:0; right:1.1rem; left:1.1rem; height:2px; z-index:1;
                        background:linear-gradient(90deg,transparent,rgba(124,58,237,.55),rgba(236,72,153,.55),transparent);
                        opacity:0; transition:opacity .4s var(--ease); }
body.page-index #comments-section .testi-track .comment-card:hover::after { opacity:1; }
body.page-index /* hide reply / actions / nested replies → pure testimonial */
                    #comments-section .testi-track .comment-actions, body.page-index #comments-section .testi-track .reply-form-container, body.page-index #comments-section .testi-track .comment-replies { display:none !important; }
body.page-index /* body first (clamped), body.page-index identity pinned to bottom */
                    #comments-section .testi-track .comment-body {
                        order:1; position:relative; z-index:1; margin:0 !important; padding:0 !important;
                        border:none !important; background:none !important;
                        color:var(--ink-2) !important; font-size:.9rem !important; line-height:1.95 !important;
                        display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
                    }
body.page-index #comments-section .testi-track .comment-header {
                        order:2; margin:auto 0 0 !important; padding-top:.75rem !important;
                        display:flex; align-items:center; gap:.6rem;
                        border-top:1px solid var(--line-2); }
body.page-index #comments-section .testi-track .comment-avatar, body.page-index #comments-section .testi-track .comment-avatar img, body.page-index #comments-section .testi-track .comment-avatar-default {
                        width:40px !important; height:40px !important; min-width:40px !important;
                        border-radius:50% !important; }
body.page-index #comments-section .testi-track .comment-avatar-default {
                        background:var(--grad-brand) !important; color:#fff !important;
                        display:grid; place-items:center; font-weight:800; font-size:1rem;
                        box-shadow:0 8px 18px -10px rgba(124,58,237,.6) !important; }
body.page-index #comments-section .testi-track .comment-avatar img { object-fit:cover; }
body.page-index #comments-section .testi-track .comment-user-name {
                        font-size:.88rem !important; font-weight:800 !important; color:var(--ink) !important; }
body.page-index #comments-section .testi-track .comment-date {
                        font-size:.72rem !important; color:var(--muted) !important;
                        display:flex; align-items:center; gap:.25rem; }
body.page-index /* ---- controls: progress + dots + arrows ---- */
                    #comments-section .testi-progress {
                        height:3px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:1.1rem; }
body.page-index #comments-section .testi-progress i {
                        display:block; height:100%; width:0%; border-radius:999px; background:var(--grad-brand); }
body.page-index #comments-section .testi-nav {
                        display:flex; align-items:center; justify-content:center; gap:.9rem; margin-top:1rem; }
body.page-index #comments-section .testi-btn {
                        width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
                        cursor:pointer; background:var(--surface); color:var(--brand);
                        border:1px solid var(--line); box-shadow:var(--sh-xs); font-size:1.15rem;
                        transition:transform var(--t),background var(--t),color var(--t),box-shadow var(--t),border-color var(--t); }
body.page-index #comments-section .testi-btn:hover {
                        background:var(--grad-brand); color:#fff; border-color:transparent;
                        transform:translateY(-2px); box-shadow:0 12px 22px -10px rgba(124,58,237,.6); }
body.page-index #comments-section .testi-dots { display:flex; align-items:center; gap:.45rem; }
body.page-index #comments-section .testi-dots button {
                        width:8px; height:8px; padding:0; border:none; cursor:pointer; border-radius:999px;
                        background:rgba(124,58,237,.22);
                        transition:width .35s var(--ease),background .35s var(--ease); }
body.page-index #comments-section .testi-dots button.is-active { width:26px; background:var(--grad-brand); }
@media (prefers-reduced-motion:reduce) {
body.page-index #comments-section .testi .comments-list.testi-track { transition:none; }
body.page-index #comments-section .testi-progress { display:none; }
}
/* ---- shared scale tokens ---- */
            body.page-index {
                --space-section: clamp(2rem, 3.6vw, 3rem) !important;
            }
body.page-index /* ---- unified type scale -------------------------------
               hero h1  (largest, still subtle) .. 1.45 → 2rem
               section title ....................  1.05 → 1.3rem
               card title .......................  .95rem
               body / desc ......................  .8 – .85rem
               labels / meta ....................  .7 – .74rem
               buttons ..........................  .8rem
            --------------------------------------------------------- */

            /* HERO */
            .hero {
                padding: clamp(2rem,4vw,3.25rem) 0 clamp(1.75rem,4vw,2.75rem) !important;
            }
body.page-index .hero-grid { gap: clamp(1.5rem,4vw,3rem) !important; }
body.page-index .hero-eyebrow {
                font-size:.7rem !important;
                padding:.32rem .7rem .32rem .6rem !important;
                margin:0 0 .9rem !important;
            }
body.page-index .hero h1 {
                font-size: clamp(1.5rem, 1rem + 3vw, 1.9rem) !important;
                line-height:1.4 !important;
                margin:0 0 .7rem !important;
            }
body.page-index .hero .tagline {
                font-size:.875rem !important;
                line-height:1.85 !important;
                margin-bottom:1rem !important;
            }
body.page-index .hero-actions { gap:.6rem !important; margin-top:1.1rem !important; }
body.page-index .hero-actions .btn { min-width:0 !important; }
body.page-index .hero-proof { margin-top:1.2rem !important; gap:.6rem !important; }
body.page-index .hero-proof .num, body.page-index .hero-proof .stars, body.page-index .hero-proof .pt, body.page-index .hero-proof .pt b { font-size:.74rem !important; }
body.page-index .hero-avatars .av {
                width:30px !important; height:30px !important; font-size:.78rem !important;
            }
body.page-index .hero-card__title { font-size:.9rem !important; }
body.page-index /* BUTTONS — one compact size everywhere */
            .btn {
                padding:.48rem 1.05rem !important;
                font-size:.8rem !important;
                min-height:0 !important;
            }
body.page-index /* SECTIONS — tighter rhythm */
            .section { padding: clamp(2rem,3.8vw,3rem) 0 !important; }
body.page-index .courses-section { padding: clamp(2rem,3.8vw,3rem) 0 !important; }
body.page-index .bg-section {
                padding: clamp(1.2rem,3vw,1.75rem) !important;
                margin-bottom:1.5rem !important;
            }
body.page-index /* SECTION HEADINGS — present but never dominant */
            .section-title, body.page-index .courses-section .section-title {
                font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem) !important;
                line-height:1.4 !important;
                margin-bottom:.4rem !important;
            }
body.page-index .section-desc, body.page-index .why-subtitle {
                font-size:.82rem !important;
                line-height:1.7 !important;
                margin-bottom:0 !important;
            }
body.page-index /* COURSE CARDS */
            .courses-section .course-body {
                padding:.8rem .85rem .85rem !important; gap:.35rem !important;
            }
body.page-index .courses-section .course-body h3 {
                font-size:.95rem !important; line-height:1.5 !important; min-height:0 !important;
            }
body.page-index .courses-section .course-description {
                font-size:.8rem !important; line-height:1.7 !important;
            }
body.page-index .courses-section .course-footer { padding-top:.6rem !important; }
body.page-index .courses-section .course-price span { font-size:1rem !important; }
body.page-index .courses-section .course-card .btn-primary {
                padding:.4rem .8rem !important; font-size:.78rem !important;
            }
body.page-index /* CLASS TYPES */
            .class-type-card { padding:.8rem 1rem !important; }
body.page-index .class-type-icon {
                width:36px !important; height:36px !important; min-width:36px !important;
                font-size:1rem !important;
            }
body.page-index .class-type-title { font-size:.9rem !important; }
body.page-index .class-type-desc { font-size:.78rem !important; line-height:1.65 !important; }
body.page-index /* WHY SIBLEARN */
            .why-siblearn-section .why-card { padding:1rem !important; }
body.page-index .why-siblearn-section .why-icon {
                width:42px !important; height:42px !important;
                font-size:1.2rem !important; margin:0 auto .6rem !important;
            }
body.page-index .why-siblearn-section .why-card h4 { font-size:.92rem !important; }
body.page-index .why-siblearn-section .why-card p {
                font-size:.8rem !important; line-height:1.65 !important;
            }
body.page-index .why-cta { margin-top: clamp(1.4rem,3vw,2rem) !important; }
body.page-index /* FEATURE BLOCKS */
            .feature { padding:.7rem !important; }
body.page-index .feature h4 { font-size:.82rem !important; }
body.page-index .feature p { font-size:.74rem !important; }
body.page-index /* FAQ — single-column layout */
            .faq-wrapper {
                grid-template-columns: 1fr !important;
                max-width: 760px !important;
                margin-left: auto !important;
                margin-right: auto !important;
                gap:.55rem !important;
                margin-top:1.4rem !important;
            }
body.page-index .faq-question { padding:.7rem 1rem !important; }
body.page-index .faq-q-text { font-size:.85rem !important; line-height:1.6 !important; }
body.page-index .faq-q-text::before {
                width:22px !important; height:22px !important; font-size:.68rem !important;
            }
body.page-index .faq-icon { width:26px !important; height:26px !important; font-size:1rem !important; }
body.page-index .faq-answer-inner {
                font-size:.8rem !important; line-height:1.75 !important; padding-top:.7rem !important;
            }
body.page-index .faq-item.is-open .faq-answer { padding:0 1rem .9rem !important; }
body.page-index /* TESTIMONIALS */
            #comments-section .testi-track .comment-card {
                padding:.9rem 1rem .85rem !important; gap:.55rem !important;
            }
body.page-index #comments-section .testi-track .comment-body {
                font-size:.82rem !important; line-height:1.8 !important;
            }
body.page-index #comments-section .testi-track .comment-user-name { font-size:.82rem !important; }
body.page-index #comments-section .testi-track .comment-date { font-size:.68rem !important; }
body.page-index #comments-section .testi-track .comment-avatar, body.page-index #comments-section .testi-track .comment-avatar img, body.page-index #comments-section .testi-track .comment-avatar-default {
                width:34px !important; height:34px !important; min-width:34px !important;
            }
body.page-index #comments-section .testi-btn {
                width:36px !important; height:36px !important; font-size:1rem !important;
            }
body.page-index /* STATS */
            .stat-number { font-size:1.2rem !important; }
body.page-index .stat-label { font-size:.72rem !important; }
body.page-index /* CONSULTATION — harmonized scale + polished look */
            #consultation { padding: clamp(2rem,3.8vw,3rem) 0 !important; }
body.page-index #consultation .accordion {
                max-width:760px !important; margin:0 auto !important;
                background:linear-gradient(160deg, var(--surface), var(--surface-2)) !important;
                border:1px solid var(--line) !important;
                border-radius:20px !important;
                box-shadow:0 22px 56px -30px rgba(124,58,237,.5) !important;
                position:relative; overflow:hidden;
            }
body.page-index #consultation .accordion::before {
                content:''; position:absolute; top:0; right:0; left:0; height:3px; z-index:2;
                background:var(--grad-brand);
            }
body.page-index #consultation .acc-header {
                padding:.95rem 1.15rem !important; gap:.75rem;
                background:transparent !important;
            }
body.page-index #consultation .acc-header:hover { background:rgba(124,58,237,.045) !important; }
body.page-index #consultation .consult-head-l { display:flex; align-items:center; gap:.7rem; }
body.page-index #consultation .consult-badge {
                width:38px; height:38px; flex:none; border-radius:12px;
                display:grid; place-items:center; color:#fff; font-size:1.15rem;
                background:var(--grad-brand);
                box-shadow:0 10px 20px -10px rgba(124,58,237,.7);
            }
body.page-index #consultation .acc-header h2 {
                font-size: clamp(1.05rem, .95rem + .45vw, 1.25rem) !important;
                font-weight:800 !important; line-height:1.2 !important; margin:0 !important;
            }
body.page-index #consultation .consult-sub {
                display:block; font-size:.72rem; color:var(--muted);
                font-weight:600; margin-top:.15rem;
            }
body.page-index #consultation .acc-icon {
                width:30px !important; height:30px !important; font-size:1.05rem !important;
                background:var(--grad-brand) !important; color:#fff !important;
                box-shadow:0 8px 16px -8px rgba(124,58,237,.6);
            }
body.page-index #consultation .acc-body { padding:.3rem 1.15rem 1.2rem !important; }
body.page-index #consultation .form-grid { gap:.7rem .8rem !important; }
body.page-index #consultation .input-group input {
                border-radius:12px !important; padding:.7rem .9rem !important;
                font-size:.85rem !important;
                background:var(--surface) !important; border:1px solid var(--line) !important;
            }
body.page-index #consultation .input-group input:focus {
                border-color:var(--brand) !important;
                box-shadow:0 0 0 3px rgba(124,58,237,.12) !important;
            }
body.page-index #consultation #consult-form .btn-primary {
                font-size:.85rem !important; padding:.72rem 1.4rem !important;
                border-radius:12px !important;
            }

/* --- about_us.php @ body.page-about --- */

        @font-face  {
            font-family: 'tabler-icons';
            src: url('assets/tabler-icons/fonts/tabler-icons.woff2') format('woff2');
            font-display: swap;
        }
body.page-about {
            --c1: #f72585; --c2: #b5179e; --c3: #7209b7; --c4: #560bad; --c5: #480ca8;
            --c6: #3a0ca3; --c7: #3f37c9; --c8: #4361ee; --c9: #4895ef; --c10: #4cc9f0;
            --white: #ffffff; --black: #000000; --gray-light: #f8f9fa; --gray-dark: #212529;
            --bg: #faf8ff; --text: #1a0d2e; --gray: #64748b;
            --shadow: 0 12px 32px rgba(131, 56, 236, 0.16);
            --radius: 20px; --transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
body.page-about > *, body.page-about * { margin: 0; padding: 0; box-sizing: border-box; }
body.page-about, body.page-about { font-family: 'Vazirmatn', sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; overflow-x: hidden; }
body.page-about a { text-decoration: none; color: inherit; }
body.page-about img { max-width: 100%; display: block; border-radius: inherit; }
body.page-about .container { max-width: 1320px; margin: 0 auto; padding: 0 1rem; }
body.page-about /* ===== HERO SECTION - Matching Instructors Page with Waves ===== */
        .about-hero {
            position: relative;
            padding: 1.5rem 0 2rem;
            overflow: hidden;
            background: var(--white);
            border-bottom-left-radius: 2rem;
            border-bottom-right-radius: 2rem;
            min-height: auto;
            display: flex;
            align-items: center;
            box-shadow: 0 12px 35px rgba(114,9,183,.06);
            margin-bottom: 2rem;
        }
body.page-about /* Particles.js Container - Minimal for fast loading */
        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: 0.5;
        }
body.page-about /* Animated gradient background layers - Matching Instructors */
        .about-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            background: linear-gradient(135deg, #fdf4ff 0%, #f0e8ff 35%, #e0f2fe 70%, #e0f7fa 100%);
            opacity: .92;
            animation: page-about-heroGlow 12s ease infinite;
        }
body.page-about .about-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            background: 
                radial-gradient(circle at 15% 30%, rgba(247,37,133,.12), transparent 40%),
                radial-gradient(circle at 85% 70%, rgba(67,97,238,.12), transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(76,201,240,.08), transparent 50%);
            pointer-events: none;
            animation: page-about-pulse 8s ease infinite;
        }
@keyframes page-about-heroGlow {
            0%, 100% { 
                background: linear-gradient(135deg, #fdf4ff 0%, #f0e8ff 35%, #e0f2fe 70%, #e0f7fa 100%); 
            }
            50% { 
                background: linear-gradient(135deg, #fef3f9 0%, #ede9ff 35%, #e0f3ff 70%, #e0fffa 100%); 
            }
        }
@keyframes page-about-pulse {
            0%, 100% { 
                opacity: .6; 
                transform: scale(1); 
            }
            50% { 
                opacity: 1; 
                transform: scale(1.05); 
            }
        }
body.page-about /* Wave Container - Keep waves */
        .wave-container {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 130px;
            overflow: hidden;
            z-index: 3;
        }
body.page-about .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 300%;
            height: 130px;
            background-repeat: repeat-x;
            animation: page-about-waveFlow 26s linear infinite;
        }
body.page-about .wave-1 {
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 130" xmlns="http://www.w3.org/2000/svg"><path d="M0,65 Q150,35 300,65 T600,65 T900,65 T1200,65 L1200,130 L0,130 Z" fill="%23f72585" fill-opacity="0.14"/></svg>') repeat-x;
            background-size: 1200px 130px;
        }
body.page-about .wave-2 {
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 130" xmlns="http://www.w3.org/2000/svg"><path d="M0,85 Q170,55 340,85 T680,85 T1020,85 L1200,85 L1200,130 L0,130 Z" fill="%234cc9f0" fill-opacity="0.12"/></svg>') repeat-x;
            background-size: 1200px 130px;
            animation-duration: 32s;
            animation-direction: reverse;
        }
@keyframes page-about-waveFlow {
            0% { transform: translateX(0); }
            100% { transform: translateX(-1200px); }
        }
body.page-about /* Content wrapper - Matching Instructors */
        .hero-content {
            position: relative;
            z-index: 10;
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
        }
body.page-about /* Main heading - Matching Instructors */
        .about-hero h1 {
            font-size: 1.6rem;
            font-weight: 800;
            margin-bottom: .5rem;
            letter-spacing: -0.5px;
            background: linear-gradient(90deg, var(--c1), var(--c3), var(--c8));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: page-about-titleFloat 4s ease-in-out infinite;
        }
@keyframes page-about-titleFloat {
            0%, 100% { 
                transform: translateY(0); 
            }
            50% { 
                transform: translateY(-6px); 
            }
        }
body.page-about /* Tagline - Matching Instructors */
        .about-hero .tagline {
            font-size: 0.85rem;
            color: #5c6bc0;
            margin-bottom: 0.8rem;
            max-width: 520px;
            margin-left: auto;
            margin-right: auto;
            font-weight: 500;
            line-height: 1.7;
        }
body.page-about .about-hero .highlight {
            color: var(--c1);
            font-weight: 700;
        }
body.page-about /* Hero actions - Matching Instructors */
        .hero-actions {
            display: flex;
            gap: .6rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 1rem;
        }
body.page-about .btn {
            padding: .4rem 1.2rem;
            border-radius: 9999px;
            font-weight: 700;
            font-size: .82rem;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            transition: var(--transition);
            cursor: pointer;
            white-space: nowrap;
            min-height: 44px;
        }
body.page-about .btn-primary {
            background: linear-gradient(135deg, var(--c1), var(--c3));
            color: #fff;
            box-shadow: 0 8px 22px rgba(247,37,133,.28);
        }
body.page-about .btn-primary:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 14px 30px rgba(247,37,133,.38);
        }
body.page-about .btn-outline {
            background: rgba(255,255,255,.7);
            color: var(--c3);
            border: 1.5px solid rgba(114,9,183,.22);
            backdrop-filter: blur(6px);
        }
body.page-about .btn-outline:hover {
            transform: translateY(-3px) scale(1.03);
            border-color: var(--c1);
            color: var(--c1);
            box-shadow: 0 12px 26px rgba(114,9,183,.18);
        }
body.page-about /* ===== Hero — premium, body.page-about matching home ===== */
        .about-hero { padding: 2.6rem 0 2.4rem; }
body.page-about .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .4rem 1rem;
            border-radius: 9999px;
            background: rgba(255,255,255,.75);
            border: 1px solid rgba(114,9,183,.16);
            box-shadow: 0 6px 18px rgba(114,9,183,.08);
            color: var(--c3);
            font-weight: 700;
            font-size: .78rem;
            margin-bottom: 1rem;
            backdrop-filter: blur(8px);
        }
body.page-about .hero-eyebrow .dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: linear-gradient(135deg, var(--c1), var(--c8));
            box-shadow: 0 0 0 4px rgba(247,37,133,.18);
            animation: page-about-pulseDot 1.8s ease infinite;
        }
@keyframes page-about-pulseDot {
            0%,100% { box-shadow: 0 0 0 4px rgba(247,37,133,.18); }
            50% { box-shadow: 0 0 0 7px rgba(247,37,133,.06); }
        }
body.page-about .about-hero h1 {
            font-size: clamp(1.4rem, 3.4vw, 2.1rem);
            line-height: 1.35;
            font-weight: 800;
            margin-bottom: .9rem;
            letter-spacing: -0.5px;
            color: var(--text);
            background: none;
            -webkit-text-fill-color: currentColor;
            animation: none;
        }
body.page-about .about-hero h1 .grad {
            background: linear-gradient(90deg, var(--c1), var(--c3), var(--c8));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
body.page-about .about-hero .tagline {
            font-size: clamp(.9rem, 1.8vw, 1.06rem);
            color: #4a4767;
            margin-bottom: 0;
            max-width: 640px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.95;
            font-weight: 500;
            text-align: center;
        }
body.page-about .hero-actions { margin-top: 1.4rem; }
body.page-about .about-hero .btn { font-size: .9rem; padding: .55rem 1.5rem; }
body.page-about /* Stats strip */
        .hero-stats {
            position: relative;
            z-index: 10;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            max-width: 860px;
            margin: 2.2rem auto 0;
            padding: 1.2rem 1rem;
            background: rgba(255,255,255,.7);
            border: 1px solid rgba(114,9,183,.12);
            border-radius: 22px;
            box-shadow: 0 18px 44px rgba(114,9,183,.10);
            backdrop-filter: blur(10px);
        }
body.page-about .hero-stat { text-align: center; }
body.page-about .hero-stat .num {
            display: block;
            font-size: clamp(1.4rem, 3.2vw, 2rem);
            font-weight: 800;
            line-height: 1.1;
            background: linear-gradient(135deg, var(--c1), var(--c3), var(--c8));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
body.page-about .hero-stat .lbl { font-size: .78rem; color: var(--gray); font-weight: 600; }
@media (max-width: 640px) {
body.page-about .hero-stats { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
}
body.page-about /* ===== بخش‌ها ===== */
        .section { padding: 2.6rem 0; }
body.page-about .section-title {
            font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem);
            font-weight: 800; text-align: center; margin-bottom: 0.6rem;
            letter-spacing: -0.3px;
            background: linear-gradient(90deg, var(--c1), var(--c3), var(--c8));
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
body.page-about .section-desc { text-align: center; color: var(--gray); max-width: 640px; margin: 0 auto 2rem; font-size: 1rem; line-height: 1.85; font-weight: 500; }
body.page-about /* ===== درباره سیب لرن — کانتینر مدرن با عکس ===== */
        .about-container {
            background: rgba(255,255,255,.72);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(114,9,183,.1);
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 18px 44px rgba(131, 56, 236, 0.12);
            display: grid;
            grid-template-columns: 1.4fr 1fr;
            gap: 0;
            margin-top: 1rem;
            position: relative;
        }
body.page-about .about-container::before {
            content: ''; position: absolute; top: 0; right: 0; width: 5px; height: 100%;
            background: linear-gradient(180deg, var(--c1), var(--c3), var(--c8));
        }
body.page-about .about-text {
            padding: 1.8rem 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
body.page-about .about-text h3 {
            font-size: clamp(1rem, 0.92rem + 0.45vw, 1.2rem); color: var(--c3); margin-bottom: 0.8rem; font-weight: 700; line-height: 1.6;
        }
body.page-about .about-text p {
            margin-bottom: 0.75rem; font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem); color: #4a4767; line-height: 1.95;
        }
body.page-about .about-text p:last-child { margin-bottom: 0; }
body.page-about .about-img {
            height: 100%;
            min-height: 240px;
            overflow: hidden;
        }
body.page-about .about-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
body.page-about .about-container:hover .about-img img {
            transform: scale(1.05);
        }
body.page-about /* ===== دوره‌ها ===== */
        .courses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 1.4rem;
            margin-top: 1.5rem;
        }
body.page-about .course-card {
            background: rgba(255,255,255,.78);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(114,9,183,.08);
            border-radius: var(--radius);
            overflow: hidden; box-shadow: 0 12px 30px rgba(131, 56, 236, 0.12);
            transition: var(--transition);
        }
body.page-about .course-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 22px 44px rgba(131, 56, 236, 0.2);
        }
body.page-about .course-header {
            height: 110px; display: flex; align-items: center; justify-content: center;
            position: relative; overflow: hidden;
        }
body.page-about .course-header::after {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 55%);
        }
body.page-about .course-header.computer { background: linear-gradient(135deg, var(--c2), var(--c8)); }
body.page-about .course-header h3 {
            font-size: 1.08rem; color: #fff; font-weight: 800;
            text-shadow: 0 2px 6px rgba(0,0,0,0.3); z-index: 2;
        }
body.page-about .course-body {
            padding: 1.3rem 1.4rem;
        }
body.page-about .course-body p {
            font-size: 0.95rem; color: #4a4767; line-height: 1.85; margin-bottom: 0.9rem;
        }
body.page-about .skills-list {
            display: grid; gap: 0.55rem; margin-top: 0.6rem;
        }
body.page-about .skills-list li {
            display: flex; align-items: center; gap: 0.5rem;
            font-size: 0.9rem; color: var(--text);
        }
body.page-about .skills-list li::before {
            content: '\2713'; color: #fff; font-size: 0.7rem; font-weight: 800;
            width: 18px; height: 18px; min-width: 18px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, var(--c1), var(--c3));
        }
body.page-about .skills-list li i {
            color: var(--c1); font-size: 0.9rem;
        }
body.page-about .courses-footer {
            text-align: center; margin-top: 1.6rem;
        }
body.page-about .courses-btn {
            padding: 0.7rem 2rem; border-radius: 9999px; font-weight: 700; font-size: 0.95rem;
            background: linear-gradient(135deg, var(--c1), var(--c7));
            color: white; box-shadow: 0 10px 24px rgba(247, 37, 133, 0.35);
            display: inline-flex; align-items: center; gap: 0.6rem;
            transition: var(--transition);
        }
body.page-about .courses-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 16px 36px rgba(247, 37, 133, 0.48);
        }
body.page-about /* ===== مزایای آکادمی ===== */
        .benefits-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-top: 1rem;
        }
body.page-about .benefit-card {
            background: rgba(255,255,255,.72);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(114,9,183,.08);
            border-radius: var(--radius); padding: 1.6rem 1.2rem; text-align: center;
            box-shadow: 0 10px 26px rgba(131, 56, 236, 0.08); transition: var(--transition);
            position: relative; overflow: hidden;
        }
body.page-about .benefit-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
            background: linear-gradient(90deg, var(--c1), var(--c8)); opacity: 0; transition: var(--transition);
        }
body.page-about .benefit-card:hover::before { opacity: 1; }
body.page-about .benefit-card:hover {
            transform: translateY(-7px); box-shadow: 0 18px 38px rgba(131, 56, 236, 0.16);
        }
body.page-about .benefit-icon {
            width: 58px; height: 58px; margin: 0 auto 0.9rem;
            background: linear-gradient(135deg, var(--c1), var(--c7));
            border-radius: 18px; display: flex; align-items: center; justify-content: center;
            color: white; font-size: 1.5rem;
            box-shadow: 0 10px 22px rgba(247,37,133,.3);
        }
body.page-about .benefit-card h4 { font-size: 0.95rem; color: var(--c3); margin-bottom: 0.4rem; font-weight: 700; }
body.page-about .benefit-card p { font-size: 0.85rem; color: var(--gray); line-height: 1.8; }
body.page-about /* ===== آمار ===== */
        .stats-section {
            background: linear-gradient(135deg, var(--gray-light) 0%, var(--white) 100%);
            padding: 2rem 0;
            position: relative;
            overflow: hidden;
        }
body.page-about .stats-section::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0; height: 4px;
            background: linear-gradient(90deg, var(--c1), var(--c6), var(--c10));
        }
body.page-about .stats-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.2rem;
            text-align: center;
        }
body.page-about .stat-card {
            background: var(--white); border-radius: 14px; padding: 1.1rem 0.8rem;
            box-shadow: 0 8px 22px rgba(131, 56, 236, 0.1);
            transition: var(--transition);
            position: relative; overflow: hidden;
        }
body.page-about .stat-card::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
            background: linear-gradient(90deg, var(--c1), var(--c8));
        }
body.page-about .stat-card:hover {
            transform: translateY(-6px) scale(1.03);
            box-shadow: 0 14px 30px rgba(131, 56, 236, 0.16);
        }
body.page-about .stat-number {
            font-size: 1.8rem; font-weight: 800;
            background: linear-gradient(90deg, var(--c1), var(--c7));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            margin-bottom: 0.2rem;
        }
body.page-about .stat-label {
            font-size: 0.82rem; color: var(--c3); font-weight: 600;
        }
body.page-about /* ===== تیم ===== */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }
        @media (max-width: 1100px) { body.page-about .team-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
        @media (max-width: 720px)  { body.page-about .team-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
        @media (max-width: 440px)  { body.page-about .team-grid { grid-template-columns: 1fr; } }
body.page-about .team-member-card {
            background: rgba(255,255,255,.74);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(114,9,183,.08);
            border-radius: var(--radius);
            overflow: hidden; box-shadow: 0 12px 30px rgba(131, 56, 236, 0.1);
            transition: var(--transition);
        }
body.page-about .team-member-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 22px 44px rgba(131, 56, 236, 0.18);
        }
body.page-about .team-icon {
            height: 78px; display: flex; align-items: center; justify-content: center;
            position: relative; overflow: hidden;
        }
body.page-about .team-icon::after {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.3), transparent 55%);
        }
body.page-about .team-icon.c1 { background: linear-gradient(135deg, var(--c1), var(--c2)); }
body.page-about .team-icon.c2 { background: linear-gradient(135deg, var(--c6), var(--c7)); }
body.page-about .team-icon.c3 { background: linear-gradient(135deg, var(--c8), var(--c9)); }
body.page-about .team-icon.c4 { background: linear-gradient(135deg, var(--c4), var(--c5)); }
body.page-about .team-icon.c5 { background: linear-gradient(135deg, var(--c1), var(--c10)); }
body.page-about .team-icon i { font-size: 1.9rem; color: white; z-index: 2; filter: drop-shadow(0 3px 6px rgba(0,0,0,.18)); }
body.page-about .team-body { padding: 0.9rem 0.75rem 1.1rem; text-align: center; }
body.page-about .team-body h4 { font-size: 0.9rem; color: var(--c3); font-weight: 700; text-align: center; }
body.page-about .team-body .role {
            font-size: 0.74rem; color: #fff; margin: 0.35rem auto 0.5rem;
            display: block; width: fit-content; padding: 0.16rem 0.7rem; border-radius: 9999px;
            background: linear-gradient(135deg, var(--c1), var(--c3)); font-weight: 700;
        }
body.page-about .team-body p { font-size: 0.8rem; color: var(--gray); line-height: 1.7; text-align: center; }
body.page-about /* ===== FAQ ===== */

        /* ===== تایم‌لاین مسیر رشد ===== */
        .timeline {
            position: relative;
            width: 100%;
            margin: 1.5rem 0 0;
            padding-right: 2rem;
        }
body.page-about .timeline::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, var(--c1), var(--c3), var(--c8), var(--c10));
            border-radius: 3px;
        }
body.page-about .timeline-item {
            position: relative;
            padding: 0 1.5rem 1.5rem 0;
        }
body.page-about .timeline-item:last-child { padding-bottom: 0; }
body.page-about .timeline-dot {
            position: absolute;
            right: -2rem;
            top: 0.2rem;
            width: 14px;
            height: 14px;
            background: linear-gradient(135deg, var(--c1), var(--c3));
            border-radius: 50%;
            border: 3px solid var(--white);
            box-shadow: 0 0 0 3px rgba(114,9,183,.15);
            transform: translateX(50%);
        }
body.page-about .timeline-content {
            background: rgba(255,255,255,.74);
            backdrop-filter: blur(8px);
            border-radius: 16px;
            padding: 1.1rem 1.3rem;
            box-shadow: 0 10px 26px rgba(131,56,236,.08);
            border: 1px solid rgba(114,9,183,.08);
            transition: var(--transition);
        }
body.page-about .timeline-item:hover .timeline-content {
            transform: translateX(-6px);
            box-shadow: 0 16px 34px rgba(131,56,236,.16);
        }
body.page-about .timeline-year {
            display: inline-block;
            background: linear-gradient(135deg, var(--c1), var(--c3));
            color: white;
            font-size: 0.8rem;
            font-weight: 700;
            padding: 0.22rem 0.85rem;
            border-radius: 999px;
            margin-bottom: 0.55rem;
            box-shadow: 0 6px 16px rgba(247,37,133,.28);
        }
body.page-about .timeline-content h4 {
            font-size: 0.95rem;
            color: var(--c3);
            font-weight: 700;
            margin-bottom: 0.4rem;
        }
body.page-about .timeline-content p {
            font-size: 0.9rem;
            color: var(--gray);
            line-height: 1.85;
            margin: 0;
        }
body.page-about /* ===== رویکرد آموزشی ===== */
        .approach-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.2rem;
            margin-top: 1rem;
        }
body.page-about .approach-card {
            background: rgba(255,255,255,.72);
            backdrop-filter: blur(8px);
            border-radius: 18px;
            padding: 1.4rem;
            box-shadow: 0 10px 26px rgba(131,56,236,.08);
            border: 1px solid rgba(114,9,183,.08);
            transition: var(--transition);
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }
body.page-about .approach-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 18px 38px rgba(131,56,236,.16);
        }
body.page-about .approach-icon {
            width: 52px;
            height: 52px;
            min-width: 52px;
            background: linear-gradient(135deg, var(--c1), var(--c7));
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            box-shadow: 0 10px 22px rgba(247,37,133,.28);
        }
body.page-about .approach-card h4 {
            font-size: 0.95rem;
            color: var(--c3);
            font-weight: 700;
            margin-bottom: 0.45rem;
        }
body.page-about .approach-card p {
            font-size: 0.9rem;
            color: var(--gray);
            line-height: 1.85;
            margin: 0;
        }
body.page-about /* ===== ارزش‌ها ===== */
        .values-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.2rem;
            margin-top: 1rem;
        }
body.page-about .value-item {
            background: rgba(255,255,255,.72);
            backdrop-filter: blur(8px);
            border-radius: 18px;
            padding: 1.4rem 1.4rem;
            box-shadow: 0 10px 26px rgba(131,56,236,.08);
            border: 1px solid rgba(114,9,183,.08);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
body.page-about .value-item::before {
            content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%;
            background: linear-gradient(180deg, var(--c1), var(--c8)); opacity: 0; transition: var(--transition);
        }
body.page-about .value-item:hover::before { opacity: 1; }
body.page-about .value-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 18px 38px rgba(131,56,236,.16);
        }
body.page-about .value-emoji {
            font-size: 2rem;
            display: block;
            margin-bottom: 0.6rem;
        }
body.page-about .value-item h4 {
            font-size: 0.95rem;
            color: var(--c3);
            font-weight: 700;
            margin-bottom: 0.45rem;
        }
body.page-about .value-item p {
            font-size: 0.9rem;
            color: var(--gray);
            line-height: 1.85;
            margin: 0;
        }
body.page-about /* ===== خط جداکننده زیبا ===== */
        .divider {
            height: 3.5rem; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
        }
body.page-about .divider::before {
            content: ''; position: absolute; width: 55%; height: 2px;
            background: linear-gradient(90deg, transparent, var(--c1), var(--c3), var(--c8), transparent);
            border-radius: 3px; animation: page-about-flow 2.8s ease-in-out infinite;
        }
@keyframes page-about-flow { 0% { transform: translateX(-120%) scaleX(.6); opacity: .7; } 50% { transform: translateX(0) scaleX(1.3); opacity: 1; } 100% { transform: translateX(120%) scaleX(.6); opacity: .7; } }
body.page-about /* ===== چشم‌انداز ===== */
        .vision-container {
            margin-top: 1.2rem;
        }
body.page-about .vision-main {
            background: linear-gradient(135deg, rgba(114,9,183,.07), rgba(247,37,133,.06));
            border: 1px solid rgba(114,9,183,.12);
            border-radius: 20px;
            padding: 1.6rem 1.8rem;
            display: flex;
            align-items: center;
            gap: 1.2rem;
            margin-bottom: 1.2rem;
            box-shadow: 0 12px 30px rgba(131,56,236,.08);
        }
body.page-about .vision-icon-large {
            width: 64px;
            height: 64px;
            min-width: 64px;
            background: linear-gradient(135deg, var(--c3), var(--c8));
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            box-shadow: 0 12px 26px rgba(67,97,238,.32);
        }
body.page-about .vision-main p {
            font-size: 0.95rem;
            color: var(--text);
            line-height: 2;
            margin: 0;
        }
body.page-about .vision-goals {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }
body.page-about .vision-goal {
            background: rgba(255,255,255,.74);
            backdrop-filter: blur(8px);
            border-radius: 16px;
            padding: 1.2rem 1.2rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.8rem;
            box-shadow: 0 10px 24px rgba(131,56,236,.07);
            border: 1px solid rgba(114,9,183,.08);
            transition: var(--transition);
        }
body.page-about .vision-goal:hover {
            transform: translateY(-5px);
            box-shadow: 0 16px 34px rgba(131,56,236,.15);
        }
body.page-about .vision-goal-icon {
            width: 50px;
            height: 50px;
            min-width: 50px;
            background: linear-gradient(135deg, var(--c1), var(--c3));
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.4rem;
            box-shadow: 0 10px 22px rgba(247,37,133,.28);
        }
body.page-about .vision-goal h4 {
            font-size: 0.9rem;
            color: var(--c3);
            font-weight: 700;
            margin-bottom: 0.15rem;
        }
body.page-about .vision-goal p {
            font-size: 0.88rem;
            color: var(--gray);
            line-height: 1.8;
            margin: 0;
        }
body.page-about /* ===== تعریف آکادمی ===== */
        .academy-quote {
            background: linear-gradient(135deg, var(--c3), var(--c8) 60%, var(--c1));
            padding: 3rem 1.5rem; text-align: center;
            border-radius: 26px; margin: 1.5rem 0;
            position: relative; overflow: hidden;
            box-shadow: 0 22px 50px rgba(114,9,183,.28);
        }
body.page-about .academy-quote::before {
            content: ''; position: absolute; inset: 0;
            background:
                radial-gradient(circle at 18% 20%, rgba(255,255,255,.18), transparent 45%),
                radial-gradient(circle at 85% 80%, rgba(255,255,255,.12), transparent 45%);
        }
body.page-about .academy-quote .quote {
            max-width: 720px; margin: 0 auto; font-size: clamp(1.05rem, 1.4vw, 1.35rem); color: #ffffff; font-weight: 700;
            line-height: 1.95; position: relative; padding: 0 1.6rem; z-index: 2;
        }
body.page-about .academy-quote .quote::before, body.page-about .academy-quote .quote::after {
            content: '"'; font-size: 3rem; color: rgba(255,255,255,.55); position: absolute; line-height: 1;
        }
body.page-about .academy-quote .quote::before { right: -0.2rem; top: -1rem; }
body.page-about .academy-quote .quote::after { left: -0.2rem; bottom: -1.8rem; }
body.page-about .academy-quote .author {
            margin-top: 1.2rem; font-size: 0.95rem; color: rgba(255,255,255,.92); font-weight: 600; position: relative; z-index: 2;
        }
/* ===== ریسپانسیو ===== */
        @media (max-width: 992px) {
            body.page-about .about-container { grid-template-columns: 1fr; max-height: none; }
            body.page-about .about-container .about-img { height: 200px; min-height: 200px; }
            body.page-about .courses-grid { grid-template-columns: 1fr; }
            body.page-about .approach-grid { grid-template-columns: 1fr; }
            body.page-about .values-grid { grid-template-columns: 1fr; }
            body.page-about .vision-goals { grid-template-columns: 1fr; }
        }
@media (max-width: 768px) {
body.page-about .about-hero {
                padding: 1.8rem 0 2rem;
                min-height: auto;
            }
body.page-about .hero-actions { margin-top: 1.1rem; }
body.page-about .timeline { padding-right: 1.5rem; }
body.page-about .approach-card { flex-direction: row; }
body.page-about .vision-main { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
body.page-about .btn { min-height: 40px; }
}

/* --- contact_us.php @ body.page-contact-us --- */
body.page-contact-us /* ---- Contact page inherits --brand/--ink/--grad-brand from theme-2026.css ---- */
        * { box-sizing: border-box; margin: 0; padding: 0; }
body.page-contact-us { scroll-behavior: smooth; }
body.page-contact-us, body.page-contact-us { 
            font-family: 'Vazirmatn', sans-serif; 
            background: var(--page); 
            color: var(--ink); 
            line-height: 1.75; 
            overflow-x: hidden; 
        }
body.page-contact-us a { text-decoration: none; color: inherit; transition: color .28s var(--ease); }
body.page-contact-us img { max-width: 100%; height: auto; display: block; }
body.page-contact-us .container { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
body.page-contact-us ::selection { background:rgba(124,58,237,.16); }
body.page-contact-us main { overflow:hidden; }
body.page-contact-us /* ================= HERO ========================================== */
        .hero {
            position:relative; overflow:hidden;
            padding:clamp(1.75rem,3.5vw,3rem) 0 clamp(1.75rem,3.5vw,2.75rem) !important;
            background:
                radial-gradient(130% 120% at 100% -10%,#f3edff 0%,transparent 52%),
                radial-gradient(120% 120% at 0% 0%,#fdeef7 0%,transparent 48%),
                var(--page) !important;
            border-radius:0 0 var(--r-xl) var(--r-xl);
            box-shadow:none; margin-bottom:0; min-height:auto;
        }
body.page-contact-us /* living aurora mesh */
        .hero::before {
            content:''; position:absolute; inset:-12%; z-index:0; pointer-events:none;
            background:
                radial-gradient(38% 48% at 80% 10%,rgba(168,85,247,.30),transparent 60%),
                radial-gradient(34% 44% at 12% 22%,rgba(236,72,153,.22),transparent 60%),
                radial-gradient(42% 56% at 60% 100%,rgba(79,110,247,.20),transparent 60%);
            opacity:.95; will-change:transform;
            animation:auroraDrift 20s ease-in-out infinite alternate;
        }
body.page-contact-us /* quiet dot grid */
        .hero::after {
            content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
            background-image:radial-gradient(rgba(124,58,237,.14) 1px,transparent 1.4px);
            background-size:30px 30px;
            -webkit-mask:radial-gradient(90% 80% at 50% 30%,#000,transparent 78%);
                    mask:radial-gradient(90% 80% at 50% 30%,#000,transparent 78%);
            opacity:.45;
        }
body.page-contact-us #particles-js { position:absolute; inset:0; width:100%; height:100%; opacity:.2; z-index:0; pointer-events:none; }
body.page-contact-us #particles-js canvas { position:absolute !important; inset:0; }
body.page-contact-us /* cursor-follow spotlight */
        .hero-spotlight { position:absolute; inset:0; z-index:1; pointer-events:none;
            background:radial-gradient(300px 300px at var(--mx,70%) var(--my,25%),
                rgba(124,58,237,.18),rgba(236,72,153,.10) 40%,transparent 68%);
            opacity:0; transition:opacity .45s var(--ease); mix-blend-mode:multiply; }
body.page-contact-us .hero:hover .hero-spotlight { opacity:1; }
body.page-contact-us .hero .container { position:relative; z-index:3; }
body.page-contact-us /* ---- two-column grid ---- */
        .hero-grid {
            display:grid; grid-template-columns:1.05fr .95fr;
            align-items:center; gap:clamp(2rem,5vw,4.5rem);
        }
body.page-contact-us .hero-content { max-width:620px; text-align:center; margin:0 auto; }
body.page-contact-us .hero-eyebrow {
            display:inline-flex; align-items:center; gap:.5rem;
            padding:.42rem .9rem .42rem .75rem; margin:0 0 1.35rem; border-radius:999px;
            background:rgba(255,255,255,.7); border:1px solid var(--line);
            color:var(--ink-2); font-size:.8125rem; font-weight:600;
            box-shadow:var(--sh-xs); backdrop-filter:blur(8px);
        }
body.page-contact-us .hero-eyebrow .dot { width:7px; height:7px; border-radius:50%; position:relative;
            background:var(--accent); }
body.page-contact-us .hero-eyebrow .dot::after { content:''; position:absolute; inset:-4px; border-radius:50%;
            background:var(--accent); opacity:.35; animation:page-contact-us-heroPing 2.4s var(--ease) infinite; }
body.page-contact-us .hero h1 {
            font-size:clamp(1.9rem,1.2rem+2.8vw,3.05rem) !important;
            font-weight:800; line-height:1.24; letter-spacing:-.025em;
            margin:0 0 1.1rem; color:var(--ink);
            background:none; -webkit-text-fill-color:initial; animation:none !important;
            text-wrap:balance;
        }
body.page-contact-us .hero h1 .grad {
            background:linear-gradient(100deg,#7c3aed 0%,#ec4899 30%,#4f6ef7 60%,#a855f7 100%);
            background-size:220% auto;
            -webkit-background-clip:text; background-clip:text;
            -webkit-text-fill-color:transparent; color:transparent;
            animation:page-contact-us-gradText 6s linear infinite;
        }
body.page-contact-us .hero .tagline {
            font-size:clamp(1rem,.95rem+.4vw,1.1875rem); color:var(--ink-2);
            max-width:48ch; margin:0 auto 2rem; font-weight:450; line-height:1.85;
            text-align:center;
        }
body.page-contact-us .hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin:0; }
body.page-contact-us .hero-actions .btn { min-width:158px; justify-content:center; }
body.page-contact-us .hero-actions .btn-primary i { transition:transform .28s var(--ease); }
body.page-contact-us .hero-actions .btn-primary:hover i { transform:translateX(-4px); }
body.page-contact-us /* ---- Social Proof ---- */
        .hero-proof { display:flex; align-items:center; justify-content:center; gap:.85rem;
            margin-top:clamp(1.75rem,3.5vw,2.5rem); }
body.page-contact-us .hero-avatars { display:flex; flex-direction:row-reverse; }
body.page-contact-us .hero-avatars .av { width:38px; height:38px; border-radius:50%; margin-inline-start:-12px;
            border:2px solid var(--surface); background:var(--surface-3);
            display:grid; place-items:center; font-size:.95rem; box-shadow:var(--sh-xs); }
body.page-contact-us .hero-avatars .av:first-child { margin-inline-start:0; }
body.page-contact-us .hero-avatars .av-1 { background:linear-gradient(135deg,#a855f7,#7c3aed); color:#fff; }
body.page-contact-us .hero-avatars .av-2 { background:linear-gradient(135deg,#ec4899,#d6409f); color:#fff; }
body.page-contact-us .hero-avatars .av-3 { background:linear-gradient(135deg,#4f6ef7,#5b9df9); color:#fff; }
body.page-contact-us .hero-avatars .av-4 { background:var(--surface); color:var(--brand);
            font-size:.72rem; font-weight:800; }
body.page-contact-us .hero-proof-text { display:flex; flex-direction:column; gap:.1rem; line-height:1.4; }
body.page-contact-us .hero-proof .stars { color:#f5a623; font-size:.85rem; letter-spacing:1px; }
body.page-contact-us .hero-proof .pt { font-size:.84rem; color:var(--muted); font-weight:500; }
body.page-contact-us .hero-proof .pt b { color:var(--ink); font-weight:700; }
body.page-contact-us /* ================= HERO VISUAL (glass card) ===================== */
        .hero-visual { position:relative; z-index:3; min-height:420px; perspective:1200px; }
body.page-contact-us /* ---- hero entrance (independent of AOS / above-the-fold safe) ---- */
        .hero-reveal { opacity:0; transform:translateY(22px);
            animation:page-contact-us-heroReveal .8s var(--ease,cubic-bezier(.22,1,.36,1)) forwards; }
body.page-contact-us .hero-reveal--delay { animation-delay:.15s; }
@keyframes page-contact-us-heroReveal { to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) {
body.page-contact-us .hero-reveal { animation:none; opacity:1; transform:none; }
}
body.page-contact-us .hero-orb { position:absolute; border-radius:50%; filter:blur(46px); z-index:0;
            will-change:transform; }
body.page-contact-us .hero-orb.o1 { width:300px; height:300px; top:-40px; right:-30px;
            background:radial-gradient(circle,rgba(168,85,247,.5),transparent 70%);
            animation:page-contact-us-heroFloat 9s var(--ease) infinite; }
body.page-contact-us .hero-orb.o2 { width:240px; height:240px; bottom:-30px; left:-20px;
            background:radial-gradient(circle,rgba(236,72,153,.42),transparent 70%);
            animation:page-contact-us-heroFloat 11s var(--ease) infinite reverse; }
body.page-contact-us .hero-card-fx {
            position:relative; z-index:2; width:min(100%,380px); margin-inline:auto;
            transform-style:preserve-3d;
            animation:page-contact-us-heroFloat 7s var(--ease) infinite;
        }
body.page-contact-us .hero-card {
            position:relative; z-index:1; width:100%;
            background:rgba(255,255,255,.78);
            backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
            border:1px solid var(--line); border-radius:var(--r-lg);
            box-shadow:var(--sh-lg);
            overflow:hidden; transform:translateZ(0);
            padding:2rem;
        }
body.page-contact-us .hero-card__header { text-align:center; margin-bottom:1.5rem; }
body.page-contact-us .hero-card__header h3 { font-size:1.05rem; font-weight:700; color:var(--ink); margin:0 0 .3rem; }
body.page-contact-us .hero-card__header p { font-size:.82rem; color:var(--muted); margin:0; }
body.page-contact-us /* contact channel grid inside hero card */
        .hero-channels { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
body.page-contact-us .hero-channel {
            display:flex; flex-direction:column; align-items:center; gap:.5rem;
            padding:1rem .5rem; border-radius:var(--r-sm); 
            background:var(--surface-2); border:1px solid var(--line-2);
            text-decoration:none; transition:all .28s var(--ease); color:var(--ink);
        }
body.page-contact-us .hero-channel:hover { background:var(--surface-3); transform:translateY(-3px);
            box-shadow:var(--sh-sm); border-color:rgba(124,58,237,.2); }
body.page-contact-us .hero-channel i { font-size:1.5rem; }
body.page-contact-us .hero-channel i.ti-mail { color:var(--brand); }
body.page-contact-us .hero-channel i.ti-phone { color:#22c55e; }
body.page-contact-us .hero-channel i.ti-brand-telegram { color:#1d9bf0; }
body.page-contact-us .hero-channel i.ti-brand-whatsapp { color:#25d366; }
body.page-contact-us .hero-channel span { font-size:.78rem; font-weight:600; color:var(--ink-2); }
body.page-contact-us .hero-channel small { font-size:.7rem; color:var(--muted); }
body.page-contact-us /* Floating chips */
        .hero-chip {
            position:absolute; z-index:3; display:flex; align-items:center; gap:.35rem;
            padding:.25rem .65rem .25rem .25rem; border-radius:999px;
            background:rgba(255,255,255,.82); backdrop-filter:blur(10px);
            border:1px solid var(--line); box-shadow:var(--sh-sm);
            font-size:.72rem; font-weight:600; color:var(--ink-2); white-space:nowrap;
            animation:page-contact-us-heroFloat 7s var(--ease) infinite;
        }
body.page-contact-us .hero-chip .chip-icon { width:24px; height:24px; border-radius:50%;
            display:grid; place-items:center; font-size:.75rem; color:#fff; }
body.page-contact-us .hero-chip.c1 { top:2%; left:-6%; animation-delay:-3s; }
body.page-contact-us .hero-chip.c1 .chip-icon { background:linear-gradient(135deg,#7c3aed,#a855f7); }
body.page-contact-us .hero-chip.c2 { bottom:-4%; right:-2%; animation-delay:-1.5s; }
body.page-contact-us .hero-chip.c2 .chip-icon { background:linear-gradient(135deg,#ec4899,#d6409f); }

/* ---- Dark theme fixes: glass surfaces hard-coded to white ---- */
[data-theme="dark"] body.page-contact-us .hero-eyebrow {
            background:rgba(255,255,255,.06);
            border-color:rgba(255,255,255,.12);
        }
[data-theme="dark"] body.page-contact-us .hero-card {
            background:rgba(23,20,42,.82);
            border-color:rgba(255,255,255,.10);
        }
[data-theme="dark"] body.page-contact-us .hero-chip {
            background:rgba(23,20,42,.85);
            border-color:rgba(255,255,255,.12);
        }
/* ---- Animations ---- */
        @keyframes auroraDrift {
            0%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); }
            50%{ transform:translate3d(2.5%,-2%,0) rotate(4deg) scale(1.08); }
            100%{ transform:translate3d(-2.5%,2%,0) rotate(-3deg) scale(1.05); }
        }
@keyframes page-contact-us-heroFloat {
            0%,100%{ transform:translateY(0) rotate(0deg); }
            50%{ transform:translateY(-10px) rotate(2deg); }
        }
@keyframes page-contact-us-heroPing {
            0%{transform:scale(.6);opacity:.5}
            70%,100%{transform:scale(1.9);opacity:0}
        }
@keyframes page-contact-us-gradText { to{ background-position:220% center; } }
@keyframes page-contact-us-btnShimmer { to{ left:130%; } }
body.page-contact-us /* ================= SECTIONS ====================================== */
        .section { 
            padding:var(--space-section, clamp(3.25rem,6vw,5.5rem)) 0; 
        }
body.page-contact-us .bg-section {
            position:relative; overflow:hidden;
            background:linear-gradient(180deg,var(--surface),var(--surface-2));
            border:1px solid var(--line);
            border-radius:var(--r-xl);
            box-shadow:0 30px 70px -40px rgba(45,30,90,.45),inset 0 1px 0 rgba(255,255,255,.65);
            padding:clamp(1.75rem,4vw,3.25rem);
            margin-bottom:2rem;
        }
body.page-contact-us .bg-section::before {
            display:block; content:''; position:absolute; inset:0 0 auto 0;
            height:3px; background:linear-gradient(90deg,transparent,#7c3aed,#ec4899,#4f6ef7,transparent);
            opacity:.9;
        }
body.page-contact-us .section-title {
            font-size:clamp(1.15rem,.95rem+.85vw,1.55rem) !important;
            font-weight:800; line-height:1.3; letter-spacing:-.01em;
            color:var(--ink) !important; -webkit-text-fill-color:initial !important;
            background:none !important; text-align:center; margin:0 auto .5rem;
            max-width:none; position:relative;
        }
body.page-contact-us .section-title::after {
            content:''; display:block; width:46px; height:3px; margin:.7rem auto 0;
            border-radius:999px;
            background:linear-gradient(90deg,#7c3aed,#ec4899 55%,#4f6ef7);
            box-shadow:0 4px 12px -4px rgba(124,58,237,.55);
        }
body.page-contact-us .section-desc {
            text-align:center; color:var(--muted) !important; font-weight:450;
            font-size:clamp(.84rem,.8rem+.2vw,.96rem) !important; line-height:1.85 !important;
            max-width:60ch; margin:.85rem auto clamp(1.4rem,3vw,2.3rem) !important;
        }
body.page-contact-us .divider { position:relative; height:clamp(1.75rem,4vw,3rem); margin:0 auto; max-width:1180px; background:none; }
body.page-contact-us .divider::before {
            display:block; content:''; position:absolute;
            top:50%; left:50%; transform:translate(-50%,-50%);
            width:min(560px,72%); height:1px;
            background:linear-gradient(90deg,transparent,rgba(124,58,237,.28) 25%,rgba(236,72,153,.28) 75%,transparent);
        }
body.page-contact-us .divider::after {
            content:''; position:absolute; top:50%; left:50%;
            width:7px; height:7px; border-radius:50%;
            transform:translate(-50%,-50%) rotate(45deg);
            background:linear-gradient(135deg,#7c3aed,#ec4899);
            box-shadow:0 0 0 5px var(--page),0 6px 16px -4px rgba(124,58,237,.55);
        }
body.page-contact-us /* ================= CONTACT INFO CARDS =========================== */
        .contact-info-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1rem;
            margin: 2rem 0;
        }
body.page-contact-us .contact-card {
            background: var(--surface); border:1px solid var(--line);
            border-radius: var(--r-md); padding: 1.4rem 1.2rem;
            text-align: center; box-shadow: var(--sh-xs);
            transition: all .28s var(--ease);
            position: relative; overflow: hidden; cursor: pointer;
        }
body.page-contact-us .contact-card a::after {
            content: ''; position: absolute; inset: 0; z-index: 2;
        }
body.page-contact-us .contact-card::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
            background: var(--grad-brand);
            transform: scaleX(0); transform-origin: right;
            transition: transform .5s var(--ease);
        }
body.page-contact-us .contact-card:hover::before { transform: scaleX(1); transform-origin: left; }
body.page-contact-us .contact-card:hover {
            transform: translateY(-4px); border-color: rgba(124,58,237,.2);
            box-shadow: var(--sh-md);
        }
body.page-contact-us .contact-icon {
            width: 46px; height: 46px; margin: 0 auto 0.8rem;
            background: var(--grad-brand); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem; color: #fff;
            box-shadow: 0 6px 16px rgba(124,58,237,.22);
            transition: all .4s var(--ease);
        }
body.page-contact-us .contact-card:hover .contact-icon {
            transform: scale(1.1) rotate(360deg);
            box-shadow: 0 10px 24px rgba(124,58,237,.3);
        }
body.page-contact-us .contact-card h3 {
            font-size: .92rem; font-weight: 700; margin-bottom: .35rem;
            color: var(--ink);
        }
body.page-contact-us .contact-card p, body.page-contact-us .contact-card a {
            color: var(--muted); font-size: .82rem; line-height: 1.7;
        }
body.page-contact-us .contact-card a:hover { color: var(--brand); }
body.page-contact-us /* ================= TICKET CTA =================================== */
        .ticket-section {
            background: var(--surface-2); border:1px solid var(--line);
            border-radius: var(--r-lg); padding: 1.4rem 1.5rem;
            text-align: center; margin: 1.5rem 0;
            transition: all .28s var(--ease);
        }
body.page-contact-us .ticket-section:hover {
            border-color: rgba(124,58,237,.2);
            transform: translateY(-4px);
            box-shadow: var(--sh-md);
        }
body.page-contact-us .ticket-icon {
            width: 48px; height: 48px; margin: 0 auto .7rem;
            background: var(--grad-brand); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem; color: #fff;
            box-shadow: 0 10px 25px rgba(124,58,237,.3);
        }
body.page-contact-us .ticket-section h3 { font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: .45rem; }
body.page-contact-us .ticket-section p { color: var(--muted); font-size: .85rem; margin-bottom: 1rem; line-height: 1.7; text-align: center; }
body.page-contact-us /* ================= FORM ACCORDION =============================== */
        .contact-form-accordion {
            background: var(--surface); border:1px solid var(--line);
            border-radius: var(--r-lg); box-shadow: var(--sh-sm);
            position: relative; overflow: hidden;
            max-width: 520px; margin: 0 auto;
        }
body.page-contact-us .contact-form-accordion::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
            background: var(--grad-brand);
            border-radius: var(--r-lg) var(--r-lg) 0 0;
        }
body.page-contact-us .form-header {
            padding: .85rem 1.2rem;
            background: var(--grad-brand); color: #fff;
            cursor: pointer;
            display: flex; justify-content: space-between; align-items: center;
            font-weight: 700; transition: opacity .28s var(--ease);
        }
body.page-contact-us .form-header:hover { opacity: .92; }
body.page-contact-us .form-header h2 {
            font-size: .95rem; margin: 0; font-weight: 800;
            display: flex; align-items: center; gap: 0.5rem;
        }
body.page-contact-us .form-icon { font-size: 1.1rem; transition: transform .4s var(--ease); }
body.page-contact-us .form-header.active .form-icon { transform: rotate(180deg); }
body.page-contact-us .form-body {
            padding: 0; max-height: 0; overflow: hidden;
            transition: all .5s cubic-bezier(.4,0,.2,1);
        }
body.page-contact-us .form-body.active { padding: 1.4rem; max-height: 2000px; }
body.page-contact-us .form-group { margin-bottom: .9rem; }
body.page-contact-us .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 768px) {
body.page-contact-us .form-row { grid-template-columns: 1fr; }
}
body.page-contact-us label {
            display: block; margin-bottom: .35rem;
            font-weight: 700; color: var(--ink-2); font-size: .82rem;
        }
body.page-contact-us input, body.page-contact-us textarea {
            width: 100%; padding: .65rem .85rem;
            border: 1.5px solid var(--line); border-radius: var(--r-xs);
            font-family: inherit; font-size: .85rem;
            background: var(--surface); color: var(--ink);
            transition: all .25s var(--ease);
        }
body.page-contact-us input:focus, body.page-contact-us textarea:focus {
            outline: none; border-color: var(--brand);
            box-shadow: var(--ring);
        }
body.page-contact-us textarea { min-height: 100px; resize: vertical; }
body.page-contact-us .error-message { color: #ef4444; font-size: .82rem; margin-top: .35rem; display: block; }
body.page-contact-us .alert {
            padding: 1rem; border-radius: var(--r-xs);
            margin-bottom: 1.2rem; font-weight: 600;
            font-size: .92rem; border: 1px solid transparent; text-align: center;
        }
body.page-contact-us .alert-success { background:rgba(6,214,160,.12); color:#0a7a56; border-color:rgba(6,214,160,.3); }
body.page-contact-us .alert-danger { background:rgba(239,71,111,.12); color:#a11d3a; border-color:rgba(239,71,111,.3); }
body.page-contact-us .honeypot { position: absolute; left: -9999px; }
body.page-contact-us /* ================= BUTTONS (local) ============================== */
        .btn { 
            padding:.72rem 1.4rem; border-radius:999px; font-weight:700;
            font-size:.9375rem; line-height:1; min-height:46px; gap:.45rem;
            display:inline-flex; align-items:center;
            transition:transform .28s var(--ease), box-shadow .28s var(--ease),
                       background .28s var(--ease), color .28s var(--ease);
            cursor:pointer; white-space:nowrap; border:none;
        }
body.page-contact-us .btn-primary {
            background:var(--grad-brand); color:#fff;
            box-shadow:0 10px 24px -10px rgba(124,58,237,.6);
        }
body.page-contact-us .btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(124,58,237,.65); }
body.page-contact-us .btn:focus-visible { outline:none; box-shadow:var(--ring); }
body.page-contact-us /* ================= FAQ ========================================== */
        .faq-section { position: relative; overflow: hidden; }
body.page-contact-us .faq-section::before {
            content: ''; position: absolute; top: -150px; right: -150px;
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(247,37,133,0.08), transparent 70%);
            border-radius: 50%; pointer-events: none;
        }
body.page-contact-us .faq-section::after {
            content: ''; position: absolute; bottom: -150px; left: -150px;
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(67,97,238,0.08), transparent 70%);
            border-radius: 50%; pointer-events: none;
        }
body.page-contact-us .faq-wrapper {
            position: relative; z-index: 1; counter-reset: faq;
            display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
            gap: 0.7rem; align-items: start;
        }
body.page-contact-us .faq-item {
            counter-increment: faq;
            background: linear-gradient(135deg, var(--white), var(--gray-light));
            border: 1px solid rgba(114, 9, 183, 0.08);
            border-radius: 14px; margin-bottom: 0; overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 18px rgba(58, 12, 163, 0.04);
        }
body.page-contact-us .faq-item:hover {
            border-color: rgba(114, 9, 183, 0.2);
            box-shadow: 0 8px 30px rgba(58, 12, 163, 0.08);
            transform: translateY(-2px);
        }
body.page-contact-us .faq-item.is-open {
            border-color: rgba(124, 58, 237, 0.28);
            box-shadow: 0 12px 40px -16px rgba(124, 58, 237, 0.22);
            background: linear-gradient(135deg, var(--surface), var(--surface-2));
        }
body.page-contact-us .faq-question {
            width: 100%; background: transparent; border: none;
            padding: 0.95rem 1.2rem; display: flex; align-items: center;
            justify-content: space-between; gap: 0.7rem; cursor: pointer;
            font-family: inherit; text-align: right; transition: padding 0.3s ease;
        }
body.page-contact-us .faq-question:hover { padding-right: 1.55rem; }
body.page-contact-us .faq-q-text {
            font-weight: 700; font-size: 0.92rem; color: var(--ink);
            line-height: 1.7; flex: 1; margin: 0; display: flex;
            align-items: center; gap: 0.55rem; transition: color 0.3s ease;
        }
body.page-contact-us .faq-q-text::before {
            content: counter(faq, arabic-indic); flex: none;
            width: 25px; height: 25px; border-radius: 50%;
            display: grid; place-items: center; font-size: 0.74rem; font-weight: 800;
            color: #fff; -webkit-text-fill-color: #fff;
            background: linear-gradient(135deg, var(--accent), var(--brand));
            box-shadow: 0 6px 14px -6px rgba(124, 58, 237, 0.6);
            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
body.page-contact-us .faq-item.is-open .faq-q-text::before { transform: scale(1.08) rotate(-6deg); }
body.page-contact-us .faq-item.is-open .faq-q-text {
            background: linear-gradient(90deg, var(--accent), var(--brand));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
body.page-contact-us .faq-icon {
            flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
            background: linear-gradient(135deg, var(--accent), var(--brand));
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 1.1rem; font-weight: 300;
            transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
        }
body.page-contact-us .faq-item.is-open .faq-icon {
            transform: rotate(135deg); box-shadow: 0 6px 20px rgba(247, 37, 133, 0.5);
        }
body.page-contact-us .faq-answer {
            max-height: 0; opacity: 0; overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, padding 0.4s ease;
            padding: 0 1.2rem;
        }
body.page-contact-us .faq-item.is-open .faq-answer { max-height: 500px; opacity: 1; padding: 0 1.2rem 1.15rem; }
body.page-contact-us .faq-answer-inner {
            border-top: 1px dashed rgba(114, 9, 183, 0.15);
            padding-top: 1rem; line-height: 1.9; color: var(--ink-2); font-size: 0.88rem;
        }
body.page-contact-us .faq-answer-inner p { margin: 0; }
@media (max-width: 600px) {
body.page-contact-us .faq-question { padding: 1.1rem 1.25rem; }
body.page-contact-us .faq-q-text { font-size: 0.95rem; }
body.page-contact-us .faq-icon { width: 32px; height: 32px; font-size: 1.2rem; }
body.page-contact-us .faq-item.is-open .faq-answer { padding: 0 1.25rem 1.25rem; }
}
/* FAQ — single-column compact layout (match home) */
body.page-contact-us .faq-wrapper {
            grid-template-columns: 1fr !important;
            max-width: 760px !important;
            margin-left: auto !important; margin-right: auto !important;
            gap: .55rem !important;
            margin-top: 1.4rem !important;
        }
body.page-contact-us .faq-question { padding: .7rem 1rem !important; }
body.page-contact-us .faq-q-text { font-size: .85rem !important; line-height: 1.6 !important; }
body.page-contact-us .faq-q-text::before {
            width: 22px !important; height: 22px !important; font-size: .68rem !important;
        }
body.page-contact-us .faq-icon { width: 26px !important; height: 26px !important; font-size: 1rem !important; }
body.page-contact-us .faq-answer-inner {
            font-size: .8rem !important; line-height: 1.75 !important; padding-top: .7rem !important;
        }
body.page-contact-us .faq-item.is-open .faq-answer { padding: 0 1rem .9rem !important; }
/* ================= RESPONSIVE =================================== */
        @media (max-width: 992px) {
            body.page-contact-us .hero h1 { font-size: clamp(1.5rem,2.5vw,2rem) !important; }
            body.page-contact-us .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
            body.page-contact-us .hero-content { max-width:100%; text-align:center; }
            body.page-contact-us .hero-actions { justify-content:center; }
            body.page-contact-us .hero-proof { justify-content:center; }
            body.page-contact-us .hero-visual { min-height: 340px; }
            body.page-contact-us .contact-info-grid { grid-template-columns: repeat(3, 1fr); }
        }
@media (max-width: 768px) {
body.page-contact-us .hero { padding:clamp(2rem,5vw,3.5rem) 0 !important; }
body.page-contact-us .hero h1 { font-size: clamp(1.3rem,4.5vw,1.7rem) !important; }
body.page-contact-us .hero .tagline { font-size: .95rem; }
body.page-contact-us .hero-visual { min-height: 280px; }
body.page-contact-us .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
body.page-contact-us .contact-form-accordion { max-width: 100%; }
body.page-contact-us .hero-chip.c1 { left:2%; }
body.page-contact-us .hero-chip.c2 { right:2%; }
body.page-contact-us #particles-js { opacity: 0.15; }
body.page-contact-us .hero-card-fx { width:min(100%,300px); }
}
@media (max-width: 480px) {
body.page-contact-us .hero h1 { font-size: clamp(1.15rem,5vw,1.4rem) !important; }
body.page-contact-us .section { padding: 2.5rem 0; }
body.page-contact-us .hero-card-fx { width:min(100%,260px); }
body.page-contact-us .contact-info-grid { grid-template-columns: 1fr; }
}

/* --- contact.php @ body.page-contact --- */
body.page-contact .contact-page {
    margin: 2rem auto;
    padding: 0 1.5rem 4rem;
    font-family: 'Vazirmatn', sans-serif;
}
body.page-contact /* ===== Hero ===== */
.contact-hero {
    padding: 2rem 0 1rem;
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid rgba(114,9,183,.15);
}
body.page-contact .contact-hero h1 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    color: var(--c3, #7209b7);
}
body.page-contact /* ===== لیست تماس ===== */
.contact-list {
    background: var(--white);
    border: 1px solid rgba(114,9,183,.08);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
body.page-contact .contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background .2s;
    text-decoration: none;
    color: inherit;
}
body.page-contact .contact-item:last-child { border-bottom: none; }
body.page-contact .contact-item:hover { background: var(--gray-light); }
body.page-contact .contact-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff !important;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--c1, #f72585), var(--c3, #7209b7));
    box-shadow: 0 4px 12px rgba(114,9,183,.18);
}
body.page-contact .contact-item-icon i {
    color: #fff !important;
}
body.page-contact .contact-item-info {
    flex: 1;
    min-width: 0;
}
body.page-contact .contact-item-info h3 {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .1rem;
}
body.page-contact .contact-item-info span {
    font-size: .82rem;
    color: #64748b;
    direction: ltr;
    display: inline-block;
}
body.page-contact .contact-item-arrow {
    color: #cbd5e1;
    font-size: .85rem;
    transition: color .2s, transform .2s;
}
body.page-contact a.contact-item:hover .contact-item-arrow {
    color: var(--c3, #7209b7);
    transform: translateX(-4px);
}
body.page-contact /* ===== باکس راهنمایی ===== */
.contact-note {
    background: linear-gradient(135deg, rgba(114,9,183,.04), rgba(67,97,238,.04));
    border: 1px solid rgba(114,9,183,.1);
    border-radius: 1rem;
    padding: 1.2rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
body.page-contact .contact-note-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--c3, #7209b7), var(--c8, #4361ee));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}
body.page-contact .contact-note-text p {
    font-size: .84rem;
    line-height: 1.9;
    color: #475569;
    margin: 0;
}
body.page-contact .contact-note-text strong { color: var(--c3, #7209b7); }
@media (max-width: 600px) {
body.page-contact .contact-page { padding: 0 1rem 3rem; }
body.page-contact .contact-hero { padding: 2rem 1.2rem; }
body.page-contact .contact-hero h1 { font-size: 1.3rem; }
body.page-contact .contact-item { padding: .9rem 1.2rem; gap: .8rem; }
body.page-contact .contact-note { flex-direction: column; text-align: center; }
}

/* --- courses.php @ body.page-courses --- */
/* ============================================================
           COURSES PAGE · premium compact redesign (matches homepage)
           Uses tokens from css/siblearn-ds.css (:root). Scoped with
           body.ds-scope for specificity over legacy external CSS.
        ============================================================ */
        body.page-courses.ds-scope { background:var(--page); color:var(--ink);
            font-family:'Vazirmatn',sans-serif; line-height:1.7; }
body.page-courses.ds-scope a { text-decoration:none; color:inherit; }
body.page-courses.ds-scope img { max-width:100%; display:block; }
body.page-courses.ds-scope main { overflow:hidden; }
body.page-courses.ds-scope .container { max-width:1180px; margin:0 auto; padding:0 1.25rem; }
/* ---------------- HERO ---------------- */
        body.page-courses.ds-scope .courses-hero {
            position:relative; overflow:hidden; display:flex; align-items:center;
            padding:clamp(2.5rem,5vw,3.5rem) 0 clamp(2.75rem,5vw,3.75rem);
            min-height:auto; margin-bottom:0;
            background:
                radial-gradient(60% 90% at 85% 0%,rgba(124,58,237,.10),transparent 60%),
                radial-gradient(55% 80% at 5% 100%,rgba(236,72,153,.08),transparent 60%),
                linear-gradient(180deg,var(--surface),var(--page));
            border-bottom:1px solid var(--line-2);
        }
body.page-courses.ds-scope .courses-hero::before {
            content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
            background-image:linear-gradient(var(--line-2) 1px,transparent 1px),
                linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
            background-size:42px 42px;
            -webkit-mask:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);
                    mask:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);
        }
body.page-courses.ds-scope .courses-hero #particles-js {
            position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.6; }
body.page-courses.ds-scope .courses-hero .container { position:relative; z-index:2; }
body.page-courses.ds-scope .courses-hero .hero-content { text-align:center; max-width:680px; margin:0 auto; }
body.page-courses.ds-scope .courses-hero .hero-content::before {
            content:'دوره‌های آموزشی سیب‌لرن';
            display:inline-flex; align-items:center; gap:.4rem;
            margin-bottom:.9rem; padding:.34rem .8rem; border-radius:999px;
            font-family:'Vazirmatn',sans-serif; font-size:.8rem; font-weight:700;
            color:var(--ink-2); background:var(--surface);
            border:1px solid var(--line); box-shadow:var(--sh-xs);
        }
body.page-courses.ds-scope .courses-hero h1 {
            font-size:clamp(1.5rem, 1rem + 3vw, 1.9rem) !important; font-weight:800;
            line-height:1.35; letter-spacing:-.01em; color:var(--ink); margin:0 0 .7rem;
        }
body.page-courses.ds-scope .courses-hero h1 span {
            background:var(--grad-text) !important;
            -webkit-background-clip:text !important; background-clip:text !important;
            -webkit-text-fill-color:transparent !important; color:transparent !important; }
body.page-courses.ds-scope .courses-hero .tagline {
            font-size:1.05rem; color:var(--muted); line-height:1.8; margin:0 auto 1.2rem; max-width:900px; text-wrap:balance; text-align:center; }
body.page-courses.ds-scope .courses-hero .tagline .highlight { color:var(--brand); font-weight:700; }
body.page-courses.ds-scope .courses-hero .hero-actions { display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; }
/* unified buttons */
        body.page-courses.ds-scope .btn {
            display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
            padding:.75rem 1.6rem; border-radius:999px; font-weight:700; font-size:.95rem;
            line-height:1; border:1px solid transparent; cursor:pointer; min-height:0;
            transition:transform var(--t-fast),box-shadow var(--t),background var(--t),color var(--t); }
body.page-courses.ds-scope .btn-primary {
            background:var(--grad-brand); color:#fff;
            box-shadow:0 10px 24px -12px rgba(124,58,237,.7); }
body.page-courses.ds-scope .btn-primary:hover { transform:translateY(-2px);
            box-shadow:0 16px 30px -12px rgba(124,58,237,.85); color:#fff; }
body.page-courses.ds-scope .btn-primary i { transition:transform var(--t-fast); }
body.page-courses.ds-scope .btn-primary:hover i { transform:translateX(-4px); }
/* ---------------- COURSES SECTION ---------------- */
        body.page-courses.ds-scope .courses-section {
            padding:var(--space-section) 0 !important;
            background:linear-gradient(180deg,var(--page),var(--surface-2)) !important; }
body.page-courses.ds-scope .courses-section .section-title {
            font-size:clamp(1.5rem, 1.25rem + 1vw, 1.9rem) !important; font-weight:800;
            text-align:center; color:var(--ink) !important; margin:0 0 .4rem;
            letter-spacing:-.01em; -webkit-text-fill-color:initial; background:none; }
body.page-courses.ds-scope .courses-section .section-desc {
            font-size:.95rem !important; text-align:center; color:var(--muted) !important;
            line-height:1.7; margin:0 auto 1.8rem; max-width:560px; font-weight:450; }
/* ---------------- GRID ---------------- */
        body.page-courses.ds-scope .course-grid {
            display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
            gap:clamp(1rem,2vw,1.4rem); align-items:stretch; }
/* ---------------- COURSE CARD (modern 2026 redesign) ---------------- */
        body.page-courses.ds-scope .course-grid .course-card {
            position:relative; isolation:isolate; display:flex; flex-direction:column;
            background:var(--surface); border:1px solid var(--line);
            border-radius:22px; overflow:hidden;
            box-shadow:0 6px 22px -16px rgba(45,30,90,.30);
            transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
            will-change:transform; }
/* thin gradient accent that grows in on hover */
        body.page-courses.ds-scope .course-grid .course-card::before {
            content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:6;
            background:var(--grad-brand); transform:scaleX(0); transform-origin:right;
            transition:transform .5s var(--ease); pointer-events:none; }
body.page-courses.ds-scope .course-grid .course-card:hover::before { transform:scaleX(1); }
body.page-courses.ds-scope .course-grid .course-card:hover {
            transform:translateY(-8px);
            border-color:rgba(124,58,237,.28);
            box-shadow:0 30px 55px -28px rgba(124,58,237,.45),0 10px 26px -18px rgba(236,72,153,.28); }
/* image */
        body.page-courses.ds-scope .course-grid .course-image {
            position:relative; aspect-ratio:16/10; overflow:hidden; margin:0; }
body.page-courses.ds-scope .course-grid .course-image img {
            width:100%; height:100%; object-fit:cover;
            transition:transform .8s var(--ease),filter .5s var(--ease); }
body.page-courses.ds-scope .course-grid .course-card:hover .course-image img { transform:scale(1.08); filter:saturate(1.08); }
body.page-courses.ds-scope .course-grid .course-image::after {
            content:''; position:absolute; inset:0; z-index:1;
            background:linear-gradient(180deg,transparent 38%,rgba(16,8,40,.58)); }
/* sweeping shine */
        body.page-courses.ds-scope .course-grid .course-image .shine {
            content:''; position:absolute; top:0; bottom:0; z-index:2; width:55%; left:-120%;
            background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
            transform:skewX(-18deg); transition:left .9s var(--ease); pointer-events:none; }
body.page-courses.ds-scope .course-grid .course-card:hover .course-image .shine { left:170%; }
/* level pill (glass, top-right) */
        body.page-courses.ds-scope .course-grid .course-level {
            position:absolute; top:.7rem; right:.7rem; left:auto; z-index:3;
            display:inline-flex; align-items:center; gap:.34rem; width:auto; max-width:max-content;
            padding:.3rem .62rem; border-radius:999px;
            background:rgba(20,12,40,.5); color:#fff; font-size:.67rem; font-weight:800;
            backdrop-filter:blur(12px) saturate(1.6); -webkit-backdrop-filter:blur(12px) saturate(1.6);
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); border:none; }
body.page-courses.ds-scope .course-grid .course-level::before {
            content:''; width:6px; height:6px; border-radius:50%; background:#a855f7; box-shadow:0 0 8px currentColor; }
body.page-courses.ds-scope .course-grid .course-level.level-beginner::before { background:#22c55e; }
body.page-courses.ds-scope .course-grid .course-level.level-intermediate::before { background:#f59e0b; }
body.page-courses.ds-scope .course-grid .course-level.level-advanced::before { background:#ec4899; }
body.page-courses.ds-scope .course-grid .course-level.level-comprehensive::before { background:#4f6ef7; }
/* category chip overlaid on image (bottom-right) */
        body.page-courses.ds-scope .course-grid .course-cat {
            position:absolute; right:.7rem; bottom:.7rem; z-index:3;
            display:inline-flex; align-items:center; gap:.3rem; max-width:calc(100% - 1.4rem);
            padding:.3rem .62rem; border-radius:999px;
            background:rgba(255,255,255,.16); color:#fff; font-size:.66rem; font-weight:700;
            backdrop-filter:blur(10px) saturate(1.4); -webkit-backdrop-filter:blur(10px) saturate(1.4);
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.page-courses.ds-scope .course-grid .course-cat i { font-size:.85rem; }
/* discount ribbon (top-left) */
        body.page-courses.ds-scope .course-grid .discount-ribbon {
            position:absolute; top:.7rem; left:.7rem; right:auto !important; z-index:4;
            min-width:0 !important;
            display:inline-flex; flex-direction:column; align-items:center; gap:.04rem;
            padding:.34rem .55rem !important; border-radius:12px;
            background:linear-gradient(135deg,#fb7185,#ec4899 55%,#d946ef); color:#fff; line-height:1;
            box-shadow:0 8px 18px -8px rgba(236,72,153,.7),inset 0 1px 1px rgba(255,255,255,.4);
            animation:none !important; }
body.page-courses.ds-scope .course-grid .discount-ribbon::after { content:none !important; display:none !important; }
body.page-courses.ds-scope .course-grid .discount-ribbon span {
            font-size:.85rem !important; font-weight:900; line-height:1;
            -webkit-text-fill-color:#fff; background:none; }
body.page-courses.ds-scope .course-grid .discount-ribbon small { font-size:.5rem; font-weight:700; opacity:.92; letter-spacing:.05em; }
/* body */
        body.page-courses.ds-scope .course-grid .course-body {
            position:relative; z-index:2; display:flex; flex-direction:column; flex:1;
            padding:1.05rem 1.1rem 1.15rem; gap:.5rem; }
body.page-courses.ds-scope .course-grid .course-body h3 {
            font-size:.95rem !important; font-weight:800; line-height:1.5; margin:0; color:var(--ink); text-align:right;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
            transition:color .3s var(--ease); }
body.page-courses.ds-scope .course-grid .course-card:hover .course-body h3 { color:var(--brand-strong); }
body.page-courses.ds-scope .course-grid .course-description {
            font-size:.8rem; line-height:1.7; margin:0; color:var(--muted); text-align:right;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* meta row (duration + students) */
        body.page-courses.ds-scope .course-grid .course-meta {
            display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.1rem; }
body.page-courses.ds-scope .course-grid .course-meta span {
            display:inline-flex; align-items:center; gap:.34rem; font-size:.72rem; font-weight:600; color:var(--muted); }
body.page-courses.ds-scope .course-grid .course-meta i { font-size:.98rem; color:var(--brand); }
/* footer */
        body.page-courses.ds-scope .course-grid .course-footer {
            position:relative; margin-top:auto; padding-top:.85rem;
            display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
body.page-courses.ds-scope .course-grid .course-footer::before {
            content:''; position:absolute; top:0; left:0; right:0; height:1px;
            background:linear-gradient(90deg,transparent,rgba(124,58,237,.22) 20%,rgba(236,72,153,.22) 80%,transparent); }
body.page-courses.ds-scope .course-grid .course-price {
            display:flex; flex-direction:column; gap:.1rem; align-items:flex-start; }
body.page-courses.ds-scope .course-grid .course-price .price-old {
            font-size:.68rem; font-weight:600; color:var(--muted); text-decoration:line-through; opacity:.8; line-height:1; }
body.page-courses.ds-scope .course-grid .course-price .price-row { display:inline-flex; align-items:baseline; gap:.25rem; }
body.page-courses.ds-scope .course-grid .course-price span {
            font-size:1rem !important; font-weight:900 !important; line-height:1.15;
            background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
            -webkit-text-fill-color:transparent; color:transparent; }
body.page-courses.ds-scope .course-grid .course-price small { font-size:.64rem !important; color:var(--muted); font-weight:600; }
body.page-courses.ds-scope .course-grid .course-footer .btn-primary {
            position:relative; overflow:hidden;
            display:inline-flex; align-items:center; justify-content:center; gap:.3rem; line-height:1;
            height:auto !important; min-width:0 !important;
            padding:.6rem 1.05rem !important; border-radius:12px !important;
            font-size:.82rem !important; font-weight:700 !important; letter-spacing:.01em;
            color:#fff; border:1px solid rgba(255,255,255,.18);
            background:linear-gradient(135deg,#7c3aed,#a855f7 50%,#ec4899);
            box-shadow:0 6px 16px -8px rgba(124,58,237,.7),inset 0 1px 1px rgba(255,255,255,.35);
            transition:transform var(--t-fast),box-shadow var(--t),filter var(--t); }
/* glossy sweep */
        body.page-courses.ds-scope .course-grid .course-footer .btn-primary::before {
            content:''; position:absolute; top:0; bottom:0; left:-120%; width:60%;
            background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
            transform:skewX(-18deg); transition:left .7s var(--ease); pointer-events:none; }
body.page-courses.ds-scope .course-grid .course-footer .btn-primary:hover::before { left:160%; }
body.page-courses.ds-scope .course-grid .course-footer .btn-primary:hover { transform:translateY(-2px);
            filter:brightness(1.05);
            box-shadow:0 12px 22px -8px rgba(124,58,237,.85),inset 0 1px 1px rgba(255,255,255,.4); }
body.page-courses.ds-scope .course-grid .course-footer .btn-primary i {
            font-size:.9em; transition:transform var(--t-fast); }
body.page-courses.ds-scope .course-grid .course-footer .btn-primary:hover i { transform:translateX(-3px); }
/* ---------------- EMPTY / ERROR STATE ---------------- */
        body.page-courses.ds-scope .no-courses-message {
            grid-column:1/-1; text-align:center; max-width:460px; margin:1rem auto;
            padding:2.5rem 1.5rem; color:var(--muted); font-size:.9rem; font-weight:600;
            background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
            box-shadow:var(--sh-sm); }
body.page-courses.ds-scope .no-courses-message::before {
            content:'\eb6e'; font-family:'tabler-icons'; display:block;
            font-size:2.4rem; margin-bottom:.6rem; color:var(--brand); font-weight:400; opacity:.85; }
/* ---------------- PAGINATION ---------------- */
        body.page-courses.ds-scope .pagination {
            display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-top:2.2rem; }
body.page-courses.ds-scope .pagination a {
            display:inline-flex; align-items:center; justify-content:center;
            min-width:36px; height:36px; padding:0 .55rem; border-radius:10px;
            font-size:.9rem; font-weight:700; color:var(--ink-2);
            background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-xs);
            transition:transform var(--t-fast),background var(--t),color var(--t),box-shadow var(--t); }
body.page-courses.ds-scope .pagination a:hover { transform:translateY(-2px); color:var(--brand);
            border-color:rgba(124,58,237,.3); }
body.page-courses.ds-scope .pagination a.active {
            background:var(--grad-brand); color:#fff; border-color:transparent;
            box-shadow:0 10px 22px -10px rgba(124,58,237,.6); }
/* ---------------- SEARCH + FILTERS ---------------- */
        body.page-courses.ds-scope .courses-toolbar {
            display:flex; flex-direction:column; gap:.9rem; align-items:center;
            margin:0 auto 1.8rem; max-width:880px; }
body.page-courses.ds-scope .courses-search {
            position:relative; width:100%; max-width:520px; }
body.page-courses.ds-scope .courses-search i {
            position:absolute; top:50%; right:1rem; transform:translateY(-50%);
            color:var(--muted); font-size:1.15rem; pointer-events:none; }
body.page-courses.ds-scope .courses-search input {
            width:100%; padding:1rem 3.2rem 1rem 1.2rem; font-family:inherit; font-size:.95rem;
            color:var(--ink); background:var(--surface); border:1px solid var(--line);
            border-radius:999px; box-shadow:var(--sh-xs);
            transition:border-color var(--t),box-shadow var(--t); }
body.page-courses.ds-scope .courses-search input:focus {
            outline:none; border-color:var(--brand); box-shadow:var(--ring); }
body.page-courses.ds-scope .courses-search input::-webkit-search-cancel-button { -webkit-appearance:none; }
body.page-courses.ds-scope .courses-filters {
            display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; }
body.page-courses.ds-scope .filter-chip {
            display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
            padding:.42rem .9rem; border-radius:999px; font-family:inherit;
            font-size:.85rem; font-weight:700; color:var(--ink-2);
            background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-xs);
            transition:transform var(--t-fast),color var(--t),background var(--t),border-color var(--t),box-shadow var(--t); }
body.page-courses.ds-scope .filter-chip:hover { transform:translateY(-2px); color:var(--brand);
            border-color:rgba(124,58,237,.3); }
body.page-courses.ds-scope .filter-chip .chip-count {
            font-size:.72rem; font-weight:800; line-height:1; padding:.15rem .38rem; border-radius:999px;
            background:var(--surface-3); color:var(--muted); transition:background var(--t),color var(--t); }
body.page-courses.ds-scope .filter-chip.active {
            color:#fff; background:var(--grad-brand); border-color:transparent;
            box-shadow:0 10px 22px -10px rgba(124,58,237,.6); }
body.page-courses.ds-scope .filter-chip.active .chip-count { background:rgba(255,255,255,.25); color:#fff; }
/* hidden card (filtered out) */
        body.page-courses.ds-scope .course-card[hidden] { display:none !important; }
/* ---------------- EMPTY (no results) STATE ---------------- */
        body.page-courses.ds-scope .courses-empty {
            text-align:center; max-width:420px; margin:1.5rem auto 0;
            padding:2.5rem 1.5rem; background:var(--surface); border:1px solid var(--line);
            border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
body.page-courses.ds-scope .courses-empty i { font-size:2.6rem; color:var(--brand); opacity:.85; }
body.page-courses.ds-scope .courses-empty h3 { font-size:1.05rem; font-weight:800; color:var(--ink); margin:.7rem 0 .35rem; }
body.page-courses.ds-scope .courses-empty p { font-size:.82rem; color:var(--muted); margin:0 0 1.1rem; }
body.page-courses.ds-scope .courses-empty .btn { padding:.55rem 1.2rem; }
/* ---------------- RESPONSIVE ---------------- */
        @media (max-width:600px) {
            body.page-courses.ds-scope .courses-hero{ padding:2rem 0 2.25rem; }
            body.page-courses.ds-scope .course-grid{ grid-template-columns:1fr; }
            body.page-courses.ds-scope .courses-hero .hero-actions .btn{ width:100%; max-width:280px; }
        }

/* --- course_detail.php @ body.page-course-detail --- */
body.page-course-detail .payment-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: page-course-detail-pmFade .25s ease; }
@keyframes page-course-detail-pmFade { from { opacity: 0; } to { opacity: 1; } }
body.page-course-detail .payment-modal { position: relative; background: var(--white); max-width: 460px; width: 100%; border-radius: 1.25rem; padding: 2rem 1.75rem; box-shadow: 0 25px 60px rgba(0,0,0,.35); text-align: center; font-family: inherit; animation: page-course-detail-pmPop .3s ease; }
@keyframes page-course-detail-pmPop { from { transform: translateY(20px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
body.page-course-detail .payment-modal-close { position: absolute; top: .75rem; left: .75rem; background: #ef4444; border: 0; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: #fff; font-size: 1.4rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(239,68,68,.35); transition: transform .15s ease, background .15s ease; }
body.page-course-detail .payment-modal-close:hover { background: #dc2626; transform: scale(1.08); color: #fff; }
body.page-course-detail .payment-modal-icon { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #4f6ef7); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; }
body.page-course-detail .payment-modal h2 { font-size: 1.4rem; color: var(--text); margin-bottom: .75rem; }
body.page-course-detail .payment-modal .course-name { font-weight: 700; color: #6d28d9; margin-bottom: .75rem; }
body.page-course-detail .payment-modal .message-text { color: #454063; line-height: 1.85; font-size: .95rem; margin-bottom: 1.25rem; }
body.page-course-detail .payment-modal .phone-box { display: inline-flex; align-items: center; gap: .6rem; background: var(--gray-light); border: 1.5px dashed #7c3aed; padding: .8rem 1.25rem; border-radius: .9rem; font-weight: 800; text-decoration: none; transition: all .2s ease; cursor: pointer; }
body.page-course-detail .payment-modal .phone-box:hover { background: var(--gray-light); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(124,58,237,.18); }
body.page-course-detail .payment-modal .phone-box i { color: #6d28d9; font-size: 1.25rem; }
body.page-course-detail .payment-modal .phone-number { font-size: 1.25rem; letter-spacing: 1px; color: var(--text); direction: ltr; }
body.page-course-detail .payment-modal .call-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; width: 100%; padding: .85rem 1.25rem; background: linear-gradient(135deg, #7c3aed, #4f6ef7); color: #fff; border: 0; border-radius: .9rem; font-weight: 700; font-size: 1rem; font-family: inherit; text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
body.page-course-detail .payment-modal .call-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(124,58,237,.35); color: #fff; }
body.page-course-detail .payment-modal .call-btn i { font-size: 1.2rem; }
body.page-course-detail .payment-modal .phone-hint { margin-top: .85rem; font-size: .85rem; color: #6b7280; }
body.page-course-detail /* استایل‌های خاص صفحه جزییات دوره - نسخه مدرن و جذاب */
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
body.page-course-detail /* Page Header */
    .page-header {
        background: linear-gradient(135deg, var(--c1), var(--c3), var(--c8));
        padding: 1.2rem 0;
        margin-bottom: 1.5rem;
        box-shadow: 0 8px 32px rgba(114, 9, 183, 0.2);
        position: relative;
        overflow: hidden;
    }
body.page-course-detail .page-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        animation: page-course-detail-rotate 20s linear infinite;
    }
@keyframes page-course-detail-rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
body.page-course-detail .page-header .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1.2rem;
    }
body.page-course-detail .header-content {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1.5rem;
    }
body.page-course-detail .btn-back {
        padding: 0.7rem 1.5rem;
        border-radius: 9999px;
        font-weight: 700;
        font-size: 0.95rem;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.3);
    }
body.page-course-detail .btn-back:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateX(-5px);
    }
body.page-course-detail .btn-back i {
        font-size: 1.1rem;
    }
body.page-course-detail /* Course Card - Sticky Sidebar با طراحی جذاب */
    .course-card {
        background: var(--white);
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(114, 9, 183, 0.12);
        overflow: hidden;
        position: sticky;
        top: 120px;
        transition: all 0.4s ease;
        border: 1px solid rgba(114, 9, 183, 0.08);
    }
body.page-course-detail .course-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 30px 80px rgba(114, 9, 183, 0.18);
    }
body.page-course-detail .course-image-wrapper {
        position: relative;
        width: 100%;
        height: 180px;
        overflow: hidden;
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.1), rgba(67, 97, 238, 0.1));
    }
body.page-course-detail .course-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }
body.page-course-detail .course-card:hover .course-image-wrapper img {
        transform: scale(1.1);
    }
body.page-course-detail .video-indicator {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 0.95);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: all 0.3s ease;
    }
body.page-course-detail .video-indicator:hover {
        transform: translate(-50%, -50%) scale(1.1);
        background: var(--white);
    }
body.page-course-detail .video-indicator i {
        font-size: 1.3rem;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-left: 3px;
    }
body.page-course-detail .card-body {
        padding: 1.2rem;
    }
body.page-course-detail .price-section {
        text-align: center;
        margin-bottom: 1rem;
        padding: 1rem;
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.05), rgba(114, 9, 183, 0.05));
        border-radius: 18px;
        position: relative;
        overflow: hidden;
    }
body.page-course-detail .price-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--c1), var(--c3), var(--c8));
    }
body.page-course-detail .price-label {
        font-size: 0.82rem;
        color: #6b7280;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
body.page-course-detail .price {
        font-size: 2rem;
        font-weight: 800;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 0.5rem;
        line-height: 1;
    }
body.page-course-detail .price-note {
        font-size: 0.85rem;
        color: #9ca3af;
    }
body.page-course-detail /* Premium Discount Display Styles */
    .discount-badge-wrapper {
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: center;
    }
body.page-course-detail .discount-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 800;
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
        position: relative;
        animation: page-course-detail-pulse-badge 2s ease-in-out infinite;
    }
body.page-course-detail .discount-badge i {
        font-size: 1rem;
    }
body.page-course-detail .badge-sparkle {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 20px;
        height: 20px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent);
        border-radius: 50%;
        animation: page-course-detail-sparkle 1.5s ease-in-out infinite;
    }
@keyframes page-course-detail-pulse-badge {
        0%, 100% { transform: scale(1); box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4); }
        50% { transform: scale(1.05); box-shadow: 0 12px 35px rgba(16, 185, 129, 0.6); }
    }
@keyframes page-course-detail-sparkle {
        0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
        50% { opacity: 1; transform: scale(1) rotate(180deg); }
    }
body.page-course-detail .price-with-discount {
        margin: 1.5rem 0;
    }
body.page-course-detail .original-price {
        font-size: 1.1rem;
        color: #9ca3af;
        text-decoration: line-through;
        font-weight: 600;
        margin-bottom: 0.8rem;
        opacity: 0.7;
    }
body.page-course-detail .discounted-price {
        font-size: 2.2rem;
        font-weight: 900;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
        margin-bottom: 0.8rem;
        animation: page-course-detail-glow-price 3s ease-in-out infinite;
    }
body.page-course-detail .discounted-price .currency {
        font-size: 1rem;
        font-weight: 700;
    }
@keyframes page-course-detail-glow-price {
        0%, 100% { filter: drop-shadow(0 0 10px rgba(247, 37, 133, 0.3)); }
        50% { filter: drop-shadow(0 0 20px rgba(247, 37, 133, 0.5)); }
    }
body.page-course-detail .discount-savings {
        font-size: 0.85rem;
        color: #10b981;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(16, 185, 129, 0.1);
        border-radius: 50px;
    }
body.page-course-detail .limited-offer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1rem;
        padding: 0.5rem 0.8rem;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.15));
        border-radius: 12px;
        font-size: 0.82rem;
        font-weight: 700;
        color: #d97706;
        border: 2px dashed #fbbf24;
    }
body.page-course-detail .limited-offer i {
        font-size: 1.2rem;
        animation: page-course-detail-tick-tock 1s ease-in-out infinite;
    }
@keyframes page-course-detail-tick-tock {
        0%, 100% { transform: rotate(-5deg); }
        50% { transform: rotate(5deg); }
    }
body.page-course-detail .btn-enroll {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.7rem;
        width: 100%;
        padding: 0.75rem;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        color: white;
        border: none;
        border-radius: 14px;
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 10px 30px rgba(247, 37, 133, 0.4);
        transition: all 0.3s ease;
        text-decoration: none;
    }
body.page-course-detail .btn-enroll:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 45px rgba(247, 37, 133, 0.5);
    }
body.page-course-detail .btn-enroll i {
        font-size: 1rem;
    }
body.page-course-detail .btn-enrolled {
        background: linear-gradient(135deg, #10b981, #059669);
        box-shadow: 0 12px 35px rgba(16, 185, 129, 0.4);
    }
body.page-course-detail .btn-enrolled:hover {
        box-shadow: 0 18px 45px rgba(16, 185, 129, 0.5);
    }
body.page-course-detail .course-features {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(114, 9, 183, 0.1);
    }
body.page-course-detail .course-features h4 {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--c3);
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
body.page-course-detail .course-features h4 i {
        font-size: 0.9rem;
    }
body.page-course-detail .course-features .features-list {
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
    }
body.page-course-detail .course-features .features-list li {
        display: flex !important;
        align-items: center !important;
        gap: 0.55rem !important;
        padding: 0.28rem 0 !important;
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
        color: #4b5563;
        border-bottom: 1px solid rgba(114, 9, 183, 0.05);
        border-radius: 0 !important;
        background: transparent !important;
        transition: color 0.25s ease, padding 0.25s ease;
        flex-direction: row !important;
    }
body.page-course-detail .course-features .features-list li:last-child {
        border-bottom: none;
    }
body.page-course-detail .course-features .features-list li:hover {
        padding-right: 0.3rem !important;
        color: var(--c3);
    }
body.page-course-detail .course-features .feature-icon {
        flex-shrink: 0 !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.1), rgba(114, 9, 183, 0.1)) !important;
        border-radius: 6px !important;
        transition: all 0.25s ease;
    }
body.page-course-detail .course-features .features-list li:hover .feature-icon {
        transform: scale(1.08);
        background: linear-gradient(135deg, var(--c1), var(--c3)) !important;
    }
body.page-course-detail .course-features .feature-icon i {
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 0.75rem !important;
        line-height: 1 !important;
        transition: all 0.25s ease;
    }
body.page-course-detail .course-features .features-list li:hover .feature-icon i {
        -webkit-text-fill-color: white;
    }
body.page-course-detail /* Main Content Area با طراحی تب‌های مدرن */
    .course-main {
        max-width: 1200px;
        margin: 1.5rem auto;
        padding: 0 1.5rem;
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        gap: 1.2rem;
    }
body.page-course-detail .course-content-container {
        background: var(--white);
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(114, 9, 183, 0.08);
        overflow: hidden;
        border: 1px solid rgba(114, 9, 183, 0.08);
        /* محافظت از محتوا - غیرقابل کپی */
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
body.page-course-detail .course-sidebar {
        /* Sidebar doesn't need extra styles as course-card already has them */
    }
body.page-course-detail .tabs-container {
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.03), rgba(114, 9, 183, 0.03));
        padding: 0.6rem 1rem 0;
        border-bottom: 3px solid rgba(114, 9, 183, 0.1);
    }
body.page-course-detail .tabs {
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
    }
body.page-course-detail .tab {
        padding: 0.6rem 1rem;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.85rem;
        color: #6b7280;
        background: transparent;
        border: none;
        border-bottom: 3px solid transparent;
        margin-bottom: -3px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border-radius: 10px 10px 0 0;
        position: relative;
    }
body.page-course-detail .tab i {
        font-size: 1rem;
        transition: all 0.3s ease;
    }
body.page-course-detail .tab:hover:not(.active) {
        color: var(--c1);
        background: rgba(247, 37, 133, 0.05);
    }
body.page-course-detail .tab.active {
        color: var(--c3);
        background: var(--white);
        border-bottom-color: var(--c3);
        box-shadow: 0 -5px 20px rgba(114, 9, 183, 0.1);
    }
body.page-course-detail .tab.active i {
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
body.page-course-detail .tab-content-wrapper {
        padding: 1.2rem;
    }
body.page-course-detail .tab-content {
        display: none;
        animation: page-course-detail-fadeInUp 0.5s ease;
    }
body.page-course-detail .tab-content.active {
        display: block;
    }
@keyframes page-course-detail-fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
body.page-course-detail /* Content Sections با طراحی مدرن */
    .content-section {
        margin-bottom: 1.5rem;
    }
body.page-course-detail .content-section h3 {
        font-size: 1.15rem;
        font-weight: 800;
        margin-bottom: 0.8rem;
        color: var(--c3);
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding-bottom: 0.8rem;
        border-bottom: 3px solid rgba(114, 9, 183, 0.1);
    }
body.page-course-detail .content-section h3 i {
        font-size: 1rem;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
body.page-course-detail .course-description {
        font-size: 0.9rem;
        line-height: 1.8;
        color: #4b5563;
        /* محافظت از محتوا - غیرقابل کپی */
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
body.page-course-detail .course-description p {
        margin-bottom: 1rem;
    }
body.page-course-detail .course-description ul, body.page-course-detail .course-description ol {
        margin: 1.2rem 0;
        padding-right: 1.5rem;
    }
body.page-course-detail .course-description li {
        margin-bottom: 0.7rem;
        line-height: 1.7;
    }
body.page-course-detail /* Syllabus با طراحی آکاردئون مدرن */
    .syllabus-section {
        margin-bottom: 1rem;
        border: 2px solid rgba(114, 9, 183, 0.1);
        border-radius: 14px;
        overflow: hidden;
        transition: all 0.3s ease;
        background: var(--white);
        /* محافظت از محتوا */
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
body.page-course-detail .syllabus-section:hover {
        border-color: rgba(114, 9, 183, 0.3);
        box-shadow: 0 8px 24px rgba(114, 9, 183, 0.12);
    }
body.page-course-detail .syllabus-header {
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.05), rgba(67, 97, 238, 0.05));
        padding: 0.8rem 1rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s ease;
    }
body.page-course-detail .syllabus-header:hover {
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.1), rgba(67, 97, 238, 0.1));
    }
body.page-course-detail .syllabus-title {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-weight: 700;
        font-size: 0.92rem;
        color: var(--c3);
    }
body.page-course-detail .syllabus-title i {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        color: white;
        border-radius: 12px;
        font-size: 0.9rem;
    }
body.page-course-detail .syllabus-meta {
        display: flex;
        gap: 1.5rem;
        align-items: center;
        font-size: 0.9rem;
        color: #6b7280;
    }
body.page-course-detail .syllabus-meta span {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
body.page-course-detail .syllabus-toggle {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--white);
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
body.page-course-detail .syllabus-toggle i {
        font-size: 1.2rem;
        color: var(--c3);
        transition: transform 0.3s ease;
    }
body.page-course-detail .syllabus-section.active .syllabus-toggle i {
        transform: rotate(180deg);
    }
body.page-course-detail .syllabus-content {
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.4s ease;
    }
body.page-course-detail .syllabus-content.active {
        padding: 1.2rem 1.5rem;
        max-height: 2000px;
    }
body.page-course-detail .lesson-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.8rem 0;
        border-bottom: 1px solid rgba(114, 9, 183, 0.08);
        transition: all 0.3s ease;
    }
body.page-course-detail .lesson-item:hover {
        padding-right: 0.5rem;
    }
body.page-course-detail .lesson-item:last-child {
        border-bottom: none;
    }
body.page-course-detail .lesson-info {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex: 1;
    }
body.page-course-detail .lesson-icon {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.1), rgba(114, 9, 183, 0.1));
        border-radius: 10px;
        transition: all 0.3s ease;
    }
body.page-course-detail .lesson-item:hover .lesson-icon {
        background: linear-gradient(135deg, var(--c1), var(--c3));
    }
body.page-course-detail .lesson-icon i {
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 0.3s ease;
    }
body.page-course-detail .lesson-item:hover .lesson-icon i {
        -webkit-text-fill-color: white;
    }
body.page-course-detail .lesson-title {
        font-weight: 600;
        color: #374151;
        font-size: 0.85rem;
    }
body.page-course-detail .lesson-duration {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        color: #9ca3af;
        font-size: 0.9rem;
    }
body.page-course-detail .lesson-duration i {
        color: var(--c8);
    }
body.page-course-detail /* Instructors با طراحی کارت مدرن */
    .instructor-card {
        display: flex;
        gap: 1rem;
        padding: 1rem;
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.03), rgba(67, 97, 238, 0.03));
        border-radius: 18px;
        margin-bottom: 1.2rem;
        transition: all 0.4s ease;
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
        /* محافظت از محتوا */
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
body.page-course-detail .instructor-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, var(--c1), var(--c3));
        transition: all 0.3s ease;
    }
body.page-course-detail .instructor-card:hover {
        box-shadow: 0 12px 35px rgba(114, 9, 183, 0.15);
        transform: translateY(-5px);
        border-color: rgba(114, 9, 183, 0.2);
    }
body.page-course-detail .instructor-card:hover::before {
        width: 100%;
        opacity: 0.05;
    }
body.page-course-detail .instructor-avatar {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        border: 3px solid white;
        box-shadow: 0 6px 20px rgba(247, 37, 133, 0.3);
        transition: all 0.3s ease;
        position: relative;
    }
body.page-course-detail .instructor-card:hover .instructor-avatar {
        transform: scale(1.05);
        box-shadow: 0 12px 32px rgba(247, 37, 133, 0.4);
    }
body.page-course-detail .instructor-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
body.page-course-detail .instructor-info {
        flex: 1;
    }
body.page-course-detail .instructor-info h4 {
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: 0.8rem;
        color: var(--c3);
    }
body.page-course-detail .instructor-role {
        display: inline-block;
        padding: 0.4rem 1rem;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        color: white;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }
body.page-course-detail .instructor-info p {
        color: #6b7280;
        line-height: 1.8;
        font-size: 0.85rem;
    }
body.page-course-detail .instructor-stats {
        display: flex;
        gap: 2rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(114, 9, 183, 0.1);
    }
body.page-course-detail .instructor-stat {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #4b5563;
        font-size: 0.9rem;
    }
body.page-course-detail .instructor-stat i {
        color: var(--c8);
        font-size: 1.1rem;
    }
body.page-course-detail .instructor-stat strong {
        color: var(--c3);
        font-weight: 700;
    }
body.page-course-detail /* Reviews با طراحی خلاقانه */
    .reviews-summary {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.05), rgba(67, 97, 238, 0.05));
        border-radius: 20px;
        margin-bottom: 1.5rem;
    }
body.page-course-detail .rating-big {
        text-align: center;
        padding: 2rem 1.5rem;
        background: var(--white);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(114, 9, 183, 0.15);
    }
body.page-course-detail .rating-number-big {
        font-size: 2.8rem;
        font-weight: 800;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        line-height: 1;
        margin-bottom: 0.5rem;
    }
body.page-course-detail .rating-stars-big {
        color: #fbbf24;
        font-size: 1.1rem;
        letter-spacing: 5px;
        margin-bottom: 1rem;
    }
body.page-course-detail .rating-count {
        font-size: 0.9rem;
        color: #6b7280;
        font-weight: 600;
    }
body.page-course-detail .rating-breakdown {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        justify-content: center;
    }
body.page-course-detail .rating-bar-item {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
body.page-course-detail .rating-bar-stars {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        color: #fbbf24;
        min-width: 100px;
        font-size: 0.9rem;
    }
body.page-course-detail .rating-bar {
        flex: 1;
        height: 10px;
        background: rgba(114, 9, 183, 0.1);
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }
body.page-course-detail .rating-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--c1), var(--c3));
        border-radius: 10px;
        transition: width 0.6s ease;
    }
body.page-course-detail .rating-bar-count {
        min-width: 40px;
        text-align: left;
        color: #6b7280;
        font-size: 0.9rem;
        font-weight: 600;
    }
body.page-course-detail .review-item {
        padding: 1.2rem;
        border: 2px solid rgba(114, 9, 183, 0.08);
        border-radius: 20px;
        margin-bottom: 1.5rem;
        transition: all 0.3s ease;
        background: var(--white);
        /* محافظت از محتوا */
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
body.page-course-detail .review-item:hover {
        border-color: rgba(114, 9, 183, 0.25);
        box-shadow: 0 10px 30px rgba(114, 9, 183, 0.12);
        transform: translateY(-3px);
    }
body.page-course-detail .review-header {
        display: flex;
        gap: 1.2rem;
        margin-bottom: 1.2rem;
    }
body.page-course-detail .review-avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid rgba(114, 9, 183, 0.2);
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(114, 9, 183, 0.2);
    }
body.page-course-detail .review-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
body.page-course-detail .review-user-info {
        flex: 1;
    }
body.page-course-detail .review-user-name {
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--c3);
        margin-bottom: 0.3rem;
    }
body.page-course-detail .review-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
body.page-course-detail .review-rating {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
body.page-course-detail .review-stars {
        color: #fbbf24;
        font-size: 1rem;
        letter-spacing: 2px;
    }
body.page-course-detail .review-date {
        color: #9ca3af;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }
body.page-course-detail .review-text {
        color: #4b5563;
        line-height: 1.8;
        font-size: 0.98rem;
    }
body.page-course-detail .review-helpful {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(114, 9, 183, 0.08);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #6b7280;
        font-size: 0.9rem;
    }
body.page-course-detail .review-helpful i {
        color: var(--c8);
    }
body.page-course-detail /* فرم ثبت نظر */
    .review-form-wrapper {
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.03), rgba(67, 97, 238, 0.03));
        border: 2px solid rgba(114, 9, 183, 0.15);
        border-radius: 20px;
        padding: 1.5rem;
        margin-bottom: 3rem;
    }
body.page-course-detail .review-form .form-group {
        margin-bottom: 1.5rem;
    }
body.page-course-detail .review-form label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.75rem;
        color: var(--text);
        font-size: 0.9rem;
    }
body.page-course-detail .review-form label i {
        color: var(--c3);
        margin-left: 0.3rem;
    }
body.page-course-detail /* Star Rating Input */
    .star-rating-input {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: 0.5rem;
        font-size: 1.8rem;
    }
body.page-course-detail .star-rating-input input[type="radio"] {
        display: none;
    }
body.page-course-detail .star-rating-input label {
        cursor: pointer;
        color: #d1d5db;
        transition: all 0.2s ease;
        margin: 0;
        padding: 0;
    }
body.page-course-detail .star-rating-input label:hover, body.page-course-detail .star-rating-input label:hover ~ label, body.page-course-detail .star-rating-input input[type="radio"]:checked ~ label {
        color: #fbbf24;
        transform: scale(1.1);
    }
body.page-course-detail .star-rating-input:hover label {
        color: #d1d5db;
    }
body.page-course-detail /* Form Control */
    .review-form .form-control {
        width: 100%;
        padding: 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        font-size: 1rem;
        font-family: 'Vazirmatn', sans-serif;
        resize: vertical;
        transition: all 0.3s ease;
        line-height: 1.6;
    }
body.page-course-detail .review-form .form-control:focus {
        outline: none;
        border-color: var(--c3);
        box-shadow: 0 0 0 4px rgba(114, 9, 183, 0.1);
    }
body.page-course-detail /* Submit Button */
    .btn-submit-review {
        background: linear-gradient(135deg, var(--c3) 0%, var(--c7) 100%);
        color: white;
        padding: 0.7rem 1.5rem;
        border: none;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        box-shadow: 0 8px 24px rgba(114, 9, 183, 0.3);
    }
body.page-course-detail .btn-submit-review:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(114, 9, 183, 0.4);
    }
body.page-course-detail .btn-submit-review:active {
        transform: translateY(0);
    }
body.page-course-detail /* Alert Styles */
    .alert {
        padding: 1.5rem;
        border-radius: 12px;
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        font-weight: 500;
    }
body.page-course-detail .alert i {
        font-size: 1.5rem;
        flex-shrink: 0;
    }
body.page-course-detail .alert-info {
        background: #dbeafe;
        border: 1px solid #3b82f6;
        color: #1e40af;
    }
body.page-course-detail .alert-warning {
        background: #fef3c7;
        border: 1px solid #f59e0b;
        color: #92400e;
    }
body.page-course-detail .alert p {
        margin: 0;
    }
body.page-course-detail /* Related Courses با طراحی بهینه */
    .related-section {
        max-width: 1320px;
        margin: 2.5rem auto;
        padding: 0 1.5rem;
    }
body.page-course-detail .section-title {
        font-size: 1.6rem;
        font-weight: 800;
        text-align: center;
        margin-bottom: 1.5rem;
        color: var(--c3);
        position: relative;
        padding-bottom: 1rem;
    }
body.page-course-detail .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 4px;
        background: linear-gradient(90deg, var(--c1), var(--c3));
        border-radius: 2px;
    }
body.page-course-detail .related-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.2rem;
        align-items: stretch;
    }
body.page-course-detail .related-card {
        background: var(--white);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(114, 9, 183, 0.08);
        transition: all 0.35s ease;
        border: 1.5px solid transparent;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
body.page-course-detail .related-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 14px 36px rgba(114, 9, 183, 0.15);
        border-color: rgba(114, 9, 183, 0.2);
    }
body.page-course-detail .related-card-image {
        width: 100%;
        height: 140px;
        overflow: hidden;
        position: relative;
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.1), rgba(67, 97, 238, 0.1));
    }
body.page-course-detail .related-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
body.page-course-detail .related-card:hover .related-card-image img {
        transform: scale(1.08);
    }
body.page-course-detail .related-card-badge {
        position: absolute;
        top: 0.7rem;
        right: 0.7rem;
        padding: 0.28rem 0.7rem;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        color: white;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 700;
        box-shadow: 0 4px 10px rgba(247, 37, 133, 0.3);
    }
body.page-course-detail .related-card-body {
        padding: 0.85rem 0.95rem 1rem;
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 0.7rem;
    }
body.page-course-detail .related-card-title {
        font-size: 0.86rem;
        font-weight: 800;
        color: var(--c3);
        margin: 0;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: calc(0.86rem * 1.6 * 2);
    }
body.page-course-detail /* «X دانشجو / Y ساعت» — مخفی */
    .related-card-meta {
        display: none !important;
    }
body.page-course-detail .related-card-price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.6rem;
        margin-top: auto;
        padding-top: 0.7rem;
        border-top: 1px solid rgba(114, 9, 183, 0.10);
    }
body.page-course-detail .related-card-price-value {
        font-size: 0.88rem;
        font-weight: 800;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        white-space: nowrap;
    }
body.page-course-detail .related-card-cta {
        padding: 0.42rem 0.85rem;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        color: #fff;
        border-radius: 999px;
        font-weight: 700;
        font-size: 0.72rem;
        box-shadow: 0 6px 14px rgba(247, 37, 133, 0.22);
        transition: all 0.3s ease;
        white-space: nowrap;
    }
body.page-course-detail .related-card:hover .related-card-cta {
        transform: translateY(-1px);
        box-shadow: 0 9px 18px rgba(247, 37, 133, 0.35);
        filter: brightness(1.05);
    }
body.page-course-detail .related-card:hover {
            transform: translateY(-8px); box-shadow: 0 16px 36px rgba(114,9,183,0.2);
            border-color: rgba(114,9,183,0.2);
        }
body.page-course-detail .related-image {
            height: 180px; overflow: hidden;
        }
body.page-course-detail .related-image img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.5s ease;
        }
body.page-course-detail .related-card:hover .related-image img { transform: scale(1.1); }
body.page-course-detail .related-body {
            padding: 1rem;
        }
body.page-course-detail .related-body h4 {
            font-size: 1.1rem; margin-bottom: 0.8rem; color: var(--c3);
            font-weight: 700;
        }
body.page-course-detail .related-meta {
            display: flex; justify-content: space-between; align-items: center;
            margin-top: 1rem; font-size: 0.92rem;
        }
body.page-course-detail .related-meta .price {
            font-size: 1.2rem; font-weight: 800; color: var(--c1);
        }
/* Responsive Design */
    @media (max-width: 1200px) {
        body.page-course-detail .course-main {
            grid-template-columns: 1fr;
        }

        body.page-course-detail .course-card {
            position: relative;
            top: 0;
            margin-top: 0;
        }

        body.page-course-detail .related-grid {
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
        }
    }
@media (max-width: 1024px) {
body.page-course-detail .reviews-summary {
            grid-template-columns: 1fr;
            gap: 2rem;
        }
body.page-course-detail .rating-big {
            max-width: 200px;
            margin: 0 auto;
        }
}
@media (max-width: 768px) {
body.page-course-detail .page-header {
            padding: 1.5rem 0;
        }
body.page-course-detail .btn-back {
            font-size: 0.85rem;
            padding: 0.6rem 1.2rem;
        }
body.page-course-detail .tabs {
            flex-direction: column;
        }
body.page-course-detail .tab {
            width: 100%;
            justify-content: center;
        }
body.page-course-detail .syllabus-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }
body.page-course-detail .syllabus-meta {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }
body.page-course-detail .instructor-card {
            flex-direction: column;
            text-align: center;
        }
body.page-course-detail .instructor-avatar {
            margin: 0 auto;
        }
body.page-course-detail .instructor-stats {
            justify-content: center;
        }
body.page-course-detail .related-grid {
            grid-template-columns: 1fr;
        }
body.page-course-detail .course-hero {
            padding: 2rem 0 1rem;
        }
body.page-course-detail .course-main {
            margin: 2rem auto;
        }
body.page-course-detail .section-title {
            font-size: 2rem;
        }
}
@media (max-width: 480px) {
body.page-course-detail .hero-content h1 {
            font-size: 1.4rem;
        }
body.page-course-detail .hero-description {
            font-size: 1rem;
        }
body.page-course-detail .course-category {
            font-size: 0.85rem;
        }
body.page-course-detail .hero-visual {
            height: 300px;
        }
body.page-course-detail .hero-image {
            width: 250px;
            height: 250px;
        }
body.page-course-detail .hero-icon {
            width: 50px;
            height: 50px;
        }
body.page-course-detail .hero-icon i {
            font-size: 1.4rem;
        }
body.page-course-detail .hero-badge {
            display: none; /* مخفی کردن در موبایل برای بهبود UX */
        }
body.page-course-detail .price {
            font-size: 1.8rem;
        }
body.page-course-detail .btn-enroll {
            font-size: 1rem;
            padding: 1rem;
        }
body.page-course-detail .lesson-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }
body.page-course-detail .tab-content-wrapper {
            padding: 1.5rem;
        }
body.page-course-detail .content-section h3 {
            font-size: 1.1rem;
        }
}
/* Loading Animation */
    @keyframes shimmer {
        0% {
            background-position: -1000px 0;
        }
        100% {
            background-position: 1000px 0;
        }
    }
body.page-course-detail .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 1000px 100%;
        animation: shimmer 2s infinite;
    }
body.page-course-detail /* header text now lives on a light surface — driven by design tokens */
    .course-h1-title { color: var(--ink); font-size: 1.6rem; font-weight: 800; margin: 1rem 0 0.5rem; line-height: 1.4; }
body.page-course-detail .course-h1-subtitle { color: var(--ink-2); font-size: 0.95rem; line-height: 1.8; margin: 0 0 0.8rem; max-width: 720px; }
body.page-course-detail .course-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.78rem; color: var(--muted); align-items: center; }
body.page-course-detail .course-breadcrumb a { color: var(--ink-2); text-decoration: none; }
body.page-course-detail .course-breadcrumb a:hover { color: var(--brand); }
body.page-course-detail .course-breadcrumb .current { color: var(--muted); }
@media (max-width: 640px) {
body.page-course-detail .course-h1-title { font-size: 1.2rem; }
body.page-course-detail .course-h1-subtitle { font-size: 0.82rem; }
}
body.page-course-detail /* ===== بازنشانی و استایل زیبای توضیحات دوره (Force) ===== */
    #overview .course-description, body.page-course-detail .content-section .course-description {
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        min-height: auto !important;
        max-height: none !important;
        text-overflow: clip !important;
        color: var(--ink-2);
        line-height: 2.05;
        font-size: 0.92rem;
        background: var(--surface-2);
        padding: 1.3rem 1.5rem;
        border-radius: var(--r-md);
        border: 1px solid var(--line-2);
        box-shadow: var(--sh-xs);
    }
body.page-course-detail /* تیترهای داخل توضیحات */
    #overview .course-description h2, body.page-course-detail #overview .course-description h3, body.page-course-detail #overview .course-description h4 {
        color: var(--c4, #560bad);
        margin: 1.6rem 0 0.8rem;
        font-weight: 800;
        position: relative;
        padding-right: 1rem;
    }
body.page-course-detail #overview .course-description h2::before, body.page-course-detail #overview .course-description h3::before, body.page-course-detail #overview .course-description h4::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0.4em;
        bottom: 0.4em;
        width: 4px;
        background: linear-gradient(180deg, var(--c1, #f72585), var(--c3, #7209b7));
        border-radius: 4px;
    }
body.page-course-detail #overview .course-description h2 { font-size: 1.25rem; }
body.page-course-detail #overview .course-description h3 { font-size: 1.1rem; }
body.page-course-detail #overview .course-description h4 { font-size: 1rem; }
body.page-course-detail /* پاراگراف */
    #overview .course-description p {
        margin: 0.8rem 0;
        text-align: right;
    }
body.page-course-detail /* لیست‌ها */
    #overview .course-description ul, body.page-course-detail #overview .course-description ol {
        padding-right: 1.4rem;
        margin: 0.8rem 0;
    }
body.page-course-detail #overview .course-description ul li, body.page-course-detail #overview .course-description ol li {
        margin: 0.4rem 0;
        line-height: 1.9;
    }
body.page-course-detail /* نقل قول */
    #overview .course-description blockquote {
        border-right: 4px solid var(--c1, #f72585);
        background: linear-gradient(135deg, rgba(247,37,133,0.06), rgba(114,9,183,0.04));
        padding: 1rem 1.2rem;
        margin: 1.2rem 0;
        border-radius: 12px;
        color: #475569;
        font-style: italic;
        position: relative;
    }
body.page-course-detail /* جداکننده */
    #overview .course-description hr {
        border: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(124,58,237,0.2), transparent);
        margin: 1.6rem 0;
    }
body.page-course-detail /* تأکید و کد */
    #overview .course-description strong { color: var(--c4, #560bad); font-weight: 800; }
body.page-course-detail #overview .course-description em { color: var(--c2, #b5179e); }
body.page-course-detail #overview .course-description code {
        background: #f1f5f9;
        color: var(--c4, #560bad);
        padding: 0.15rem 0.5rem;
        border-radius: 6px;
        font-size: 0.88em;
        font-family: 'Courier New', monospace;
    }
body.page-course-detail /* پیش‌نیازها و خروجی به همان سبک کارتی */
    #overview .content-section:nth-of-type(n+2) .course-description {
        background: linear-gradient(180deg, var(--white) 0%, var(--gray-light) 100%);
    }
body.page-course-detail /* ===== استایل عمومی content-section در صفحه جزئیات ===== */
    #overview.tab-content .content-section {
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
    }
body.page-course-detail #overview.tab-content .content-section h3 {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 1.15rem;
        font-weight: 800;
        margin-bottom: 1rem;
        color: var(--c4, #560bad);
        padding-bottom: 0.7rem;
        border-bottom: 2px dashed rgba(124,58,237,0.12);
    }
/* موبایل */
    @media (max-width: 640px) {
        body.page-course-detail #overview .course-description,
        body.page-course-detail .content-section .course-description {
            padding: 1rem;
            font-size: 0.92rem;
            line-height: 1.95;
        }
        body.page-course-detail #overview .course-description h2 { font-size: 1.1rem; }
        body.page-course-detail #overview .course-description h3 { font-size: 1rem; }
    }
/* ==== Authoritative design tokens (mirror homepage / siblearn-ds.css).
   Loaded after header.php so it overrides the legacy palette globally. ==== */
body.page-course-detail {
    /* legacy palette REMAPPED to refined values so every var(--cN)
       reference across this page (rich-text, buttons, badges) is unified */
    --c1:#ec4899; --c2:#d6409f; --c3:#7c3aed; --c4:#6d28d9; --c5:#5b21b6;
    --c6:#5145cd; --c7:#4f46e5; --c8:#4f6ef7; --c9:#5b9df9; --c10:#38bdf8;

    --brand:#6d28d9; --brand-strong:#5b21b6; --accent:#ec4899; --indigo:#4f6ef7;
    --ink:#1c1830; --ink-2:#454063; --muted:#6c6788;
    --page:#fcfcfe; --surface:#ffffff; --surface-2:#f8f8fc; --surface-3:#f3f2fa;
    --line:rgba(28,24,48,.065); --line-2:rgba(28,24,48,.04);

    --grad-brand:linear-gradient(135deg,#7c3aed 0%,#a855f7 45%,#ec4899 100%);
    --grad-text:linear-gradient(90deg,#ec4899,#7c3aed 55%,#4f6ef7);
    --ring:0 0 0 4px rgba(124,58,237,.14);

    --sh-xs:0 1px 2px rgba(28,24,48,.04);
    --sh-sm:0 6px 20px -12px rgba(45,30,90,.14);
    --sh-md:0 18px 44px -24px rgba(45,30,90,.18);
    --sh-lg:0 36px 80px -36px rgba(45,30,90,.26);

    --r-xs:12px; --r-sm:16px; --r-md:20px; --r-lg:26px; --r-xl:32px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --t-fast:.18s var(--ease); --t:.28s var(--ease);
}
body.page-course-detail /* ---- base rhythm for this page ---- */
body { background:var(--page,#fbfaff) !important; color:var(--ink,#1c1830); }
body.page-course-detail .page-header, body.page-course-detail .course-main, body.page-course-detail .related-section { font-family:'Vazirmatn',sans-serif; }
body.page-course-detail /* ============================ HERO ============================ */
.page-header {
    position:relative; overflow:hidden; margin-bottom:0 !important;
    padding:clamp(2.75rem,6vw,4.75rem) 0 clamp(3rem,6.5vw,5.25rem) !important;
    background:
        radial-gradient(60% 90% at 88% -10%,rgba(124,58,237,.09),transparent 55%),
        radial-gradient(55% 80% at 5% 110%,rgba(236,72,153,.07),transparent 55%),
        linear-gradient(180deg,var(--surface,var(--white)),var(--page,#fcfcfe)) !important;
    border-bottom:1px solid var(--line-2,rgba(28,24,48,.04)) !important;
    box-shadow:none !important;
}
body.page-course-detail .page-header::before, body.page-course-detail .page-header::after { content:none !important; display:none !important; }
body.page-course-detail .page-header .ph-aurora {
    position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.45;
    background-image:radial-gradient(rgba(124,58,237,.1) 1px,transparent 1.4px);
    background-size:34px 34px;
    -webkit-mask:radial-gradient(80% 70% at 50% 25%,#000,transparent 78%);
            mask:radial-gradient(80% 70% at 50% 25%,#000,transparent 78%);
}
body.page-course-detail .page-header .container { position:relative; z-index:2; max-width:1180px; }
body.page-course-detail .page-header .header-content { max-width:780px; }
body.page-course-detail .course-breadcrumb {
    display:flex; flex-wrap:wrap; gap:.45rem; align-items:center;
    font-size:.78rem; color:var(--muted,#6c6788); margin-bottom:1.4rem; font-weight:600;
}
body.page-course-detail .page-header .course-breadcrumb a { color:var(--ink-2,#454063); text-decoration:none; transition:color var(--t-fast); }
body.page-course-detail .page-header .course-breadcrumb a:hover { color:var(--brand,#6d28d9); }
body.page-course-detail .page-header .course-breadcrumb i { font-size:.85rem; color:var(--muted,#6c6788); opacity:.7; }
body.page-course-detail .page-header .course-breadcrumb .current { color:var(--muted,#6c6788);
    max-width:30ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.page-course-detail .ph-eyebrow {
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.44rem 1rem; margin-bottom:1.3rem; border-radius:999px;
    background:var(--surface,var(--white)); border:1px solid var(--line,rgba(28,24,48,.09));
    color:var(--ink-2,#454063); font-size:.78rem; font-weight:700;
    box-shadow:var(--sh-xs,0 1px 2px rgba(28,24,48,.05));
}
body.page-course-detail .ph-eyebrow i { color:var(--accent,#ec4899); font-size:.9rem; }
body.page-course-detail .page-header .course-h1-title {
    color:var(--ink,#1c1830) !important;
    font-size:clamp(1.9rem,1.2rem+2.8vw,3rem) !important;
    font-weight:800 !important; line-height:1.22 !important; letter-spacing:-.025em;
    margin:0 0 1.1rem !important; text-wrap:balance;
}
body.page-course-detail .page-header .course-h1-subtitle {
    color:var(--ink-2,#454063) !important; font-size:clamp(1rem,.9rem+.35vw,1.15rem) !important;
    line-height:2.05 !important; margin:0 0 1.8rem !important; max-width:64ch; font-weight:450;
}
body.page-course-detail .course-meta-hero { display:flex; flex-wrap:wrap; gap:.7rem; margin:0 0 2rem; }
body.page-course-detail .course-meta-hero .meta-chip {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.55rem 1.05rem; border-radius:999px; font-size:.82rem; font-weight:600;
    color:var(--ink-2,#454063); background:var(--surface,var(--white));
    border:1px solid var(--line,rgba(28,24,48,.09)); box-shadow:var(--sh-xs,0 1px 2px rgba(28,24,48,.05));
}
body.page-course-detail .course-meta-hero .meta-chip i { font-size:.95rem; color:var(--brand,#6d28d9); }
body.page-course-detail .course-meta-hero .meta-chip b { color:var(--ink,#1c1830); font-weight:800; }
body.page-course-detail .course-meta-hero .meta-chip small { color:var(--muted,#6c6788); font-weight:600; }
body.page-course-detail .course-meta-hero .meta-chip--star { background:linear-gradient(135deg,rgba(245,166,35,.12),rgba(245,166,35,.04));
    border-color:rgba(245,166,35,.3); }
body.page-course-detail .course-meta-hero .meta-chip--star i { color:#f5a623; }
body.page-course-detail .course-meta-hero .meta-chip--level { color:#fff; border-color:transparent; }
body.page-course-detail .course-meta-hero .meta-chip--level i { color:#fff; }
body.page-course-detail .course-meta-hero .meta-chip--level b { color:#fff; }
body.page-course-detail .course-meta-hero .level-beginner { background:linear-gradient(135deg,#22c55e,#16a34a); }
body.page-course-detail .course-meta-hero .level-intermediate { background:linear-gradient(135deg,#f59e0b,#d97706); }
body.page-course-detail .course-meta-hero .level-advanced { background:linear-gradient(135deg,#ec4899,#d6409f); }
body.page-course-detail .course-meta-hero .level-comprehensive { background:linear-gradient(135deg,#4f6ef7,#5b9df9); }
body.page-course-detail .page-header .btn-back {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.5rem 1.05rem; border-radius:999px; font-size:.8rem; font-weight:700;
    color:var(--brand,#6d28d9); background:var(--surface,var(--white));
    border:1px solid var(--line,rgba(28,24,48,.09)); box-shadow:var(--sh-xs,0 1px 2px rgba(28,24,48,.05));
    text-decoration:none; transition:transform var(--t-fast),box-shadow var(--t),color var(--t),border-color var(--t);
}
body.page-course-detail .page-header .btn-back:hover { transform:translateY(-2px); color:var(--brand-strong,#5b21b6);
    border-color:rgba(124,58,237,.3); box-shadow:var(--sh-sm,0 4px 14px -6px rgba(45,30,90,.16)); }
body.page-course-detail .page-header .btn-back i { font-size:.95rem; transition:transform var(--t-fast); }
body.page-course-detail .page-header .btn-back:hover i { transform:translateX(4px); }
body.page-course-detail /* ============================ LAYOUT ============================ */
.course-main {
    max-width:1180px; margin:clamp(2rem,4vw,3rem) auto clamp(2.5rem,5vw,3.75rem);
    padding:0 1.25rem;
    display:grid; grid-template-columns:minmax(0,1fr) 360px;
    gap:clamp(1.75rem,3vw,2.75rem); align-items:start;
}
body.page-course-detail .course-content-container { min-width:0; }
body.page-course-detail /* ---- premium segmented tabs ---- */
.tabs-container { position:sticky; top:5.6rem; z-index:20; margin-bottom:1.5rem; background:transparent; }
body.page-course-detail .course-main .tabs {
    display:flex; gap:.3rem; padding:.4rem; border:1px solid var(--line,rgba(28,24,48,.065));
    background:rgba(255,255,255,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-radius:999px; box-shadow:var(--sh-sm,0 6px 20px -12px rgba(45,30,90,.14));
    overflow:hidden; scrollbar-width:none;
}
body.page-course-detail .course-main .tabs::-webkit-scrollbar { display:none; }
body.page-course-detail .course-main .tab {
    flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    padding:.72rem 1rem; border:none; background:transparent; cursor:pointer;
    border-radius:999px; font-family:inherit; font-size:.83rem; font-weight:700;
    color:var(--ink-2,#454063); white-space:nowrap;
    transition:color var(--t),background var(--t),box-shadow var(--t);
}
body.page-course-detail .course-main .tab i { font-size:1rem; }
body.page-course-detail .course-main .tab:hover { color:var(--brand,#6d28d9); }
body.page-course-detail .course-main .tab.active {
    color:#fff; background:var(--grad-brand,linear-gradient(135deg,#7c3aed,#a855f7 45%,#ec4899));
    box-shadow:0 8px 18px -10px rgba(124,58,237,.7);
}
body.page-course-detail /* ---- content surface ---- */
.tab-content-wrapper {
    background:var(--surface,var(--white)); border:1px solid var(--line,rgba(28,24,48,.065));
    border-radius:var(--r-lg,26px); box-shadow:var(--sh-sm,0 6px 20px -12px rgba(45,30,90,.14));
    padding:clamp(2.25rem,4vw,3.5rem) !important;
}
body.page-course-detail .tab-content { display:none; animation:page-course-detail-cdFade .4s var(--ease,cubic-bezier(.22,.61,.36,1)); }
body.page-course-detail .tab-content.active { display:block; }
@keyframes page-course-detail-cdFade { from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
body.page-course-detail .course-main .content-section { margin-bottom:3.25rem; }
body.page-course-detail .course-main .content-section:last-child { margin-bottom:0; }
body.page-course-detail #overview.tab-content .content-section h3, body.page-course-detail .course-main .content-section > h3 {
    display:flex; align-items:center; gap:.55rem;
    font-size:1.2rem !important; font-weight:800 !important; color:var(--ink,#1c1830) !important;
    margin:0 0 1.3rem !important; padding-bottom:.9rem !important;
    border-bottom:1px solid var(--line,rgba(28,24,48,.09)) !important;
}
body.page-course-detail .course-main .content-section > h3 i {
    width:36px; height:36px; flex:none; display:grid; place-items:center;
    border-radius:11px; font-size:1.15rem; color:var(--brand,#6d28d9); background:var(--surface-3,var(--gray-light));
}
body.page-course-detail /* ---- learning outcomes / requirements / target audience ---- */
.cd-block { margin-top:1.6rem; }
body.page-course-detail .cd-checklist { list-style:none; margin:0; padding:0; display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:.65rem; }
body.page-course-detail .cd-checklist li {
    display:flex; align-items:flex-start; gap:.6rem; padding:.7rem .85rem;
    background:var(--surface-2,var(--gray-light)); border:1px solid var(--line-2,rgba(28,24,48,.06));
    border-radius:var(--r-sm,14px); font-size:.86rem; line-height:1.7; color:var(--ink-2,#454063);
    transition:transform var(--t-fast),box-shadow var(--t),border-color var(--t);
}
body.page-course-detail .cd-checklist li:hover { transform:translateY(-2px); border-color:rgba(124,58,237,.22); box-shadow:var(--sh-xs,0 1px 2px rgba(28,24,48,.05)); }
body.page-course-detail .cd-checklist li i { flex:none; margin-top:.1rem; font-size:1.05rem; color:#22c55e; }
body.page-course-detail .cd-checklist.cd-checklist--req li i { color:var(--brand,#6d28d9); }
body.page-course-detail .cd-checklist.cd-checklist--aud li i { color:var(--accent,#ec4899); }
body.page-course-detail /* ---- feature highlights ---- */
.cd-feature-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:.8rem; }
body.page-course-detail .cd-feature {
    display:flex; align-items:center; gap:.7rem; padding:.85rem .95rem;
    background:var(--surface,var(--white)); border:1px solid var(--line,rgba(28,24,48,.09));
    border-radius:var(--r-md,18px); box-shadow:var(--sh-xs,0 1px 2px rgba(28,24,48,.05));
    transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
body.page-course-detail .cd-feature:hover { transform:translateY(-3px); box-shadow:var(--sh-sm,0 4px 14px -6px rgba(45,30,90,.16)); border-color:rgba(124,58,237,.22); }
body.page-course-detail .cd-feature .ic { width:38px; height:38px; flex:none; display:grid; place-items:center;
    border-radius:11px; color:#fff; font-size:1.1rem; background:var(--grad-brand,linear-gradient(135deg,#7c3aed,#ec4899)); }
body.page-course-detail .cd-feature b { display:block; font-size:.85rem; font-weight:700; color:var(--ink,#1c1830); }
body.page-course-detail .cd-feature span { font-size:.74rem; color:var(--muted,#6c6788); }
body.page-course-detail /* ============================ CURRICULUM ============================ */
.syllabus-section {
    border:1px solid var(--line,rgba(28,24,48,.09)) !important; border-radius:var(--r-md,18px) !important;
    margin-bottom:1rem !important; overflow:hidden; background:var(--surface,var(--white)) !important;
    box-shadow:none !important; transition:border-color var(--t),box-shadow var(--t);
}
body.page-course-detail .syllabus-section.active { border-color:rgba(124,58,237,.28) !important; box-shadow:var(--sh-sm,0 4px 14px -6px rgba(45,30,90,.16)) !important; }
body.page-course-detail .syllabus-header {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1.15rem 1.35rem !important; cursor:pointer; background:var(--surface-2,var(--gray-light)) !important; transition:background var(--t);
}
body.page-course-detail .syllabus-section.active .syllabus-header { background:linear-gradient(90deg,rgba(124,58,237,.07),rgba(236,72,153,.04)) !important; }
body.page-course-detail .syllabus-header:hover { background:var(--surface-3,var(--gray-light)) !important; }
body.page-course-detail .syllabus-title { display:flex; align-items:center; gap:.6rem; font-size:.92rem !important; font-weight:700 !important; color:var(--ink,#1c1830) !important; min-width:0; }
body.page-course-detail .syllabus-title i { color:var(--brand,#6d28d9); font-size:1.05rem; flex:none; }
body.page-course-detail .syllabus-title span { overflow:hidden; text-overflow:ellipsis; }
body.page-course-detail .syllabus-meta { display:flex; align-items:center; gap:1rem; font-size:.74rem !important; color:var(--muted,#6c6788) !important; white-space:nowrap; }
body.page-course-detail .syllabus-meta span { display:inline-flex; align-items:center; gap:.25rem; }
body.page-course-detail .syllabus-toggle { width:28px; height:28px; flex:none; display:grid; place-items:center;
    border-radius:8px; background:var(--surface,var(--white)); color:var(--brand,#6d28d9);
    border:1px solid var(--line,rgba(28,24,48,.09)); transition:transform var(--t),background var(--t); }
body.page-course-detail .syllabus-section.active .syllabus-toggle { transform:rotate(180deg); background:var(--grad-brand,linear-gradient(135deg,#7c3aed,#ec4899)); color:#fff; border-color:transparent; }
body.page-course-detail .syllabus-content { display:none; padding:.4rem 1.1rem 1rem !important; }
body.page-course-detail .syllabus-content.active { display:block; }
body.page-course-detail .lesson-item {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.6rem .2rem !important; border-bottom:1px solid var(--line-2,rgba(28,24,48,.06)) !important;
    border-radius:0 !important; background:transparent !important; transition:padding var(--t-fast),color var(--t);
}
body.page-course-detail .lesson-item:last-child { border-bottom:none !important; }
body.page-course-detail .lesson-item:hover { padding-inline:.5rem !important; }
body.page-course-detail .lesson-info { display:flex; align-items:center; gap:.6rem; min-width:0; }
body.page-course-detail .lesson-icon { width:30px; height:30px; flex:none; display:grid; place-items:center;
    border-radius:8px; background:var(--surface-3,var(--gray-light)) !important; color:var(--brand,#6d28d9) !important; font-size:.9rem; }
body.page-course-detail .lesson-title { font-size:.85rem !important; color:var(--ink-2,#454063) !important; font-weight:500; overflow:hidden; text-overflow:ellipsis; }
body.page-course-detail .lesson-duration { display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem !important; color:var(--muted,#6c6788) !important; white-space:nowrap; }
body.page-course-detail /* @@CD_CONTINUE@@ */

/* ============================ INSTRUCTORS ============================ */
.instructor-card {
    display:flex; gap:1.3rem; align-items:flex-start;
    padding:1.6rem !important; margin-bottom:1.25rem !important;
    background:var(--surface,var(--white)) !important; border:1px solid var(--line,rgba(28,24,48,.09)) !important;
    border-radius:var(--r-lg,24px) !important; box-shadow:none !important;
    transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
body.page-course-detail .instructor-card:hover { transform:translateY(-3px); border-color:rgba(124,58,237,.22) !important; box-shadow:var(--sh-sm,0 4px 14px -6px rgba(45,30,90,.16)) !important; }
body.page-course-detail .instructor-avatar { width:84px !important; height:84px !important; flex:none; border-radius:20px !important;
    overflow:hidden; box-shadow:var(--sh-sm,0 4px 14px -6px rgba(45,30,90,.16)); border:2px solid var(--surface,#fff); }
body.page-course-detail .instructor-avatar img { width:100%; height:100%; object-fit:cover; }
body.page-course-detail .instructor-info { min-width:0; }
body.page-course-detail .instructor-info h4 { font-size:1rem !important; font-weight:800 !important; color:var(--ink,#1c1830) !important; margin:0 0 .2rem !important; }
body.page-course-detail .instructor-role { display:inline-block; font-size:.74rem !important; font-weight:700; color:var(--brand,#6d28d9) !important;
    background:var(--surface-3,var(--gray-light)); padding:.2rem .6rem; border-radius:999px; margin-bottom:.6rem; }
body.page-course-detail .instructor-info p { font-size:.85rem !important; color:var(--ink-2,#454063) !important; line-height:1.85 !important; margin:.4rem 0 .8rem !important; }
body.page-course-detail .instructor-stats { display:flex; flex-wrap:wrap; gap:1.1rem; }
body.page-course-detail .instructor-stat { display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem !important; color:var(--muted,#6c6788) !important; }
body.page-course-detail .instructor-stat i { color:var(--brand,#6d28d9); font-size:.95rem; }
body.page-course-detail .instructor-stat strong { color:var(--ink,#1c1830); font-weight:800; }
body.page-course-detail /* ============================ REVIEWS ============================ */
.reviews-summary {
    display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:center;
    padding:1.9rem !important; margin-bottom:2rem !important;
    background:var(--surface,var(--white)) !important; border:1px solid var(--line,rgba(28,24,48,.09)) !important;
    border-radius:var(--r-lg,24px) !important; box-shadow:var(--sh-sm) !important;
}
body.page-course-detail .rating-big { text-align:center; padding-inline-end:1.5rem; border-inline-end:1px solid var(--line,rgba(28,24,48,.09)); }
body.page-course-detail .rating-number-big { font-size:2.6rem !important; font-weight:900 !important; line-height:1;
    background:var(--grad-brand,linear-gradient(135deg,#7c3aed,#ec4899)); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent; }
body.page-course-detail .rating-stars-big { color:#f5a623; font-size:1rem !important; letter-spacing:2px; margin:.3rem 0; }
body.page-course-detail .rating-count { font-size:.74rem !important; color:var(--muted,#6c6788) !important; }
body.page-course-detail .rating-breakdown { display:flex; flex-direction:column; gap:.4rem; }
body.page-course-detail .rating-bar-item { display:flex; align-items:center; gap:.7rem; }
body.page-course-detail .rating-bar-stars { color:#f5a623; font-size:.72rem; width:70px; flex:none; letter-spacing:1px; }
body.page-course-detail .rating-bar { flex:1; height:8px; border-radius:999px; background:var(--surface-3,var(--gray-light)); overflow:hidden; }
body.page-course-detail .rating-bar-fill { height:100%; border-radius:999px; background:var(--grad-brand,linear-gradient(135deg,#7c3aed,#ec4899)); }
body.page-course-detail .rating-bar-count { font-size:.72rem; color:var(--muted,#6c6788); width:34px; text-align:left; flex:none; }
body.page-course-detail .review-item {
    padding:1.6rem !important; margin-bottom:1.25rem !important;
    background:var(--surface,var(--white)) !important; border:1px solid var(--line,rgba(28,24,48,.09)) !important;
    border-radius:var(--r-lg,24px) !important; box-shadow:none !important; transition:box-shadow var(--t),border-color var(--t); }
body.page-course-detail .review-item:hover { border-color:rgba(124,58,237,.18) !important; box-shadow:var(--sh-sm,0 4px 14px -6px rgba(45,30,90,.16)) !important; }
body.page-course-detail .review-header { display:flex; align-items:center; gap:.8rem; margin-bottom:.7rem; }
body.page-course-detail .review-avatar { width:48px !important; height:48px !important; flex:none; border-radius:50%; overflow:hidden; border:2px solid var(--surface,#fff); box-shadow:var(--sh-xs,0 1px 2px rgba(28,24,48,.05)); }
body.page-course-detail .review-avatar img { width:100%; height:100%; object-fit:cover; }
body.page-course-detail .review-user-name { font-size:.9rem !important; font-weight:800 !important; color:var(--ink,#1c1830) !important; }
body.page-course-detail .review-meta { display:flex; align-items:center; gap:.8rem; margin-top:.15rem; }
body.page-course-detail .review-stars { color:#f5a623; font-size:.8rem; }
body.page-course-detail .review-date { display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem !important; color:var(--muted,#6c6788) !important; }
body.page-course-detail .review-text { font-size:.86rem !important; color:var(--ink-2,#454063) !important; line-height:1.9 !important; margin:0 0 .7rem !important; }
body.page-course-detail .review-helpful { display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; color:var(--muted,#6c6788); cursor:pointer; transition:color var(--t-fast); background:transparent; border:1px solid var(--line,#e5e7eb); border-radius:999px; padding:.3rem .7rem; font-family:inherit; }
body.page-course-detail .review-helpful:hover { color:var(--brand,#6d28d9); border-color:var(--brand,#6d28d9); }
body.page-course-detail .review-helpful.is-voted { color:#fff; background:var(--brand,#6d28d9); border-color:var(--brand,#6d28d9); }
body.page-course-detail .review-helpful .rh-count { font-weight:700; }
body.page-course-detail .review-helpful .rh-count[hidden] { display:none; }
body.page-course-detail .star-rating-input { display:inline-flex; flex-direction:row-reverse; gap:.2rem; font-size:1.6rem; }
body.page-course-detail .star-rating-input input { display:none; }
body.page-course-detail .star-rating-input label { color:var(--surface-3,#d9d3ee); cursor:pointer; transition:color var(--t-fast); }
body.page-course-detail .star-rating-input input:checked ~ label, body.page-course-detail .star-rating-input label:hover, body.page-course-detail .star-rating-input label:hover ~ label { color:#f5a623; }
body.page-course-detail .btn-submit-review { background:var(--grad-brand,linear-gradient(135deg,#7c3aed,#ec4899)) !important;
    border-radius:999px !important; font-size:.9rem !important; padding:.7rem 1.6rem !important;
    box-shadow:0 10px 24px -12px rgba(124,58,237,.7) !important; transition:transform var(--t-fast),box-shadow var(--t) !important; }
body.page-course-detail .btn-submit-review:hover { transform:translateY(-2px); }
body.page-course-detail .review-form textarea, body.page-course-detail .review-form .form-control {
    border:1px solid var(--line,rgba(28,24,48,.09)) !important; border-radius:var(--r-sm,14px) !important;
    background:var(--surface-2,var(--gray-light)) !important; font-family:inherit; font-size:.88rem !important; }
body.page-course-detail .review-form textarea:focus { outline:none; border-color:var(--brand,#6d28d9) !important;
    background:var(--surface,var(--white)) !important; box-shadow:var(--ring,0 0 0 4px rgba(124,58,237,.16)) !important; }
body.page-course-detail /* ============================ FAQ ============================ */
.cd-faq { display:flex; flex-direction:column; gap:.85rem; }
body.page-course-detail .cd-faq details {
    background:var(--surface-2,var(--gray-light)); border:1px solid var(--line,rgba(28,24,48,.09));
    border-radius:var(--r-md,18px); overflow:hidden; transition:border-color var(--t),box-shadow var(--t); }
body.page-course-detail .cd-faq details[open] { border-color:rgba(124,58,237,.25); box-shadow:var(--sh-sm,0 4px 14px -6px rgba(45,30,90,.16)); background:var(--surface,var(--white)); }
body.page-course-detail .cd-faq summary {
    display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; list-style:none;
    padding:1.05rem 1.3rem; font-size:.9rem; font-weight:700; color:var(--ink,#1c1830); }
body.page-course-detail .cd-faq summary::-webkit-details-marker { display:none; }
body.page-course-detail .cd-faq summary::after { content:'\ea5f'; font-family:'tabler-icons'; font-weight:400; color:var(--brand,#6d28d9); transition:transform var(--t); flex:none; }
body.page-course-detail .cd-faq details[open] summary::after { transform:rotate(180deg); }
body.page-course-detail .cd-faq .faq-a { padding:0 1.1rem 1rem; font-size:.84rem; line-height:1.9; color:var(--ink-2,#454063); }
body.page-course-detail /* ============================ STICKY ENROLL CARD ============================ */
.course-sidebar { position:sticky; top:5.6rem; }
body.page-course-detail .course-sidebar .course-card {
    position:relative; background:var(--surface,var(--white)) !important;
    border:1px solid var(--line,rgba(28,24,48,.09)) !important; border-radius:var(--r-lg,24px) !important;
    box-shadow:var(--sh-md,0 14px 36px -16px rgba(45,30,90,.24)) !important; overflow:hidden;
    transition:box-shadow var(--t) !important; top:auto !important;
}
body.page-course-detail .course-image-wrapper { position:relative; aspect-ratio:16/10; overflow:hidden; }
body.page-course-detail .course-image-wrapper img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease,cubic-bezier(.22,.61,.36,1)); }
body.page-course-detail .course-sidebar .course-card:hover .course-image-wrapper img { transform:scale(1.05); }
body.page-course-detail .course-image-wrapper::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(20,12,45,.4)); }
body.page-course-detail .video-indicator {
    position:absolute; inset:0; margin:auto; width:58px; height:58px; z-index:2;
    display:grid; place-items:center; border-radius:50%; cursor:pointer;
    background:rgba(255,255,255,.92); color:var(--brand,#6d28d9); font-size:1.5rem;
    box-shadow:0 10px 30px -8px rgba(0,0,0,.4); transition:transform var(--t),background var(--t),color var(--t);
}
body.page-course-detail .video-indicator:hover { transform:scale(1.08); background:var(--grad-brand,linear-gradient(135deg,#7c3aed,#ec4899)); color:#fff; }
body.page-course-detail .card-body { padding:2rem !important; }
body.page-course-detail .price-section { margin-bottom:1.6rem; }
body.page-course-detail .price-label { font-size:.76rem !important; color:var(--muted,#6c6788) !important; font-weight:600; margin-bottom:.3rem; }
body.page-course-detail .price { font-size:1.7rem !important; font-weight:900 !important;
    background:var(--grad-brand,linear-gradient(135deg,#7c3aed,#ec4899)); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent; }
body.page-course-detail .price span { -webkit-text-fill-color:var(--muted,#6c6788); font-size:.95rem !important; font-weight:600; }
body.page-course-detail .price-note { font-size:.74rem !important; color:var(--muted,#6c6788) !important; margin-top:.3rem; }
body.page-course-detail .discount-badge-wrapper { margin-bottom:.7rem; }
body.page-course-detail .discount-badge {
    display:inline-flex; align-items:center; gap:.4rem; padding:.34rem .8rem; border-radius:999px;
    background:linear-gradient(135deg,#fb7185,#ec4899 55%,#d946ef); color:#fff;
    font-size:.76rem; font-weight:800; box-shadow:0 8px 18px -8px rgba(236,72,153,.7); }
body.page-course-detail .badge-sparkle { display:none; }
body.page-course-detail .price-with-discount .original-price { font-size:.85rem !important; color:var(--muted,#6c6788) !important; text-decoration:line-through; }
body.page-course-detail .price-with-discount .discounted-price { font-size:1.7rem !important; font-weight:900 !important;
    background:var(--grad-brand,linear-gradient(135deg,#7c3aed,#ec4899)); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent; line-height:1.2; }
body.page-course-detail .price-with-discount .currency { -webkit-text-fill-color:var(--muted,#6c6788); font-size:.9rem; font-weight:600; }
body.page-course-detail .discount-savings { font-size:.76rem !important; color:#16a34a !important; font-weight:700; margin-top:.3rem; }
body.page-course-detail .limited-offer { display:inline-flex; align-items:center; gap:.4rem; margin-top:.7rem;
    padding:.45rem .8rem; border-radius:var(--r-sm,14px); font-size:.74rem; font-weight:700;
    color:#b45309; background:#fff7ed; border:1px solid #fed7aa; }
body.page-course-detail .btn-enroll {
    display:flex !important; align-items:center; justify-content:center; gap:.5rem; width:100%;
    padding:.9rem 1.25rem !important; border-radius:999px !important; font-size:.95rem !important; font-weight:800 !important;
    color:#fff !important; background:var(--grad-brand,linear-gradient(135deg,#7c3aed,#a855f7 45%,#ec4899)) !important;
    border:none !important; cursor:pointer; text-decoration:none; position:relative; overflow:hidden;
    box-shadow:0 14px 30px -12px rgba(124,58,237,.7) !important;
    transition:transform var(--t-fast),box-shadow var(--t) !important;
}
body.page-course-detail .btn-enroll::after { content:''; position:absolute; top:0; left:-120%; width:55%; height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg); }
body.page-course-detail .btn-enroll:hover { transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(124,58,237,.8) !important; }
body.page-course-detail .btn-enroll:hover::after { animation:page-course-detail-cdShine .9s var(--ease,cubic-bezier(.22,.61,.36,1)) forwards; }
@keyframes page-course-detail-cdShine { to{ left:130%; } }
body.page-course-detail .btn-enrolled { background:linear-gradient(135deg,#22c55e,#16a34a) !important; box-shadow:0 14px 30px -12px rgba(34,197,94,.6) !important; }
body.page-course-detail .course-features { margin-top:1.25rem; padding-top:1.1rem; border-top:1px solid var(--line,rgba(28,24,48,.09)); }
body.page-course-detail .course-features h4 { display:flex; align-items:center; gap:.4rem; font-size:.86rem !important; font-weight:800 !important; color:var(--ink,#1c1830) !important; margin:0 0 .7rem !important; }
body.page-course-detail .course-features h4 i { color:var(--brand,#6d28d9); }
body.page-course-detail .course-features .features-list li { color:var(--ink-2,#454063) !important; border-bottom:1px solid var(--line-2,rgba(28,24,48,.06)) !important; }
body.page-course-detail .course-features .feature-icon {
    background:var(--surface-3,var(--gray-light)) !important; border-radius:8px !important;
    width:24px !important; height:24px !important; min-width:24px !important; max-width:24px !important;
    min-height:24px !important; max-height:24px !important; }
body.page-course-detail .course-features .feature-icon i { background:none !important; -webkit-text-fill-color:var(--brand,#6d28d9) !important; color:var(--brand,#6d28d9) !important; font-size:.82rem !important; }
body.page-course-detail .course-features .features-list li:hover { color:var(--brand,#6d28d9) !important; }
body.page-course-detail .course-features .features-list li:hover .feature-icon { background:var(--grad-brand,linear-gradient(135deg,#7c3aed,#ec4899)) !important; }
body.page-course-detail .course-features .features-list li:hover .feature-icon i { -webkit-text-fill-color:#fff !important; color:#fff !important; }
body.page-course-detail /* ============================ RELATED ============================ */
.related-section { max-width:1180px; margin:clamp(1rem,2vw,2rem) auto clamp(3rem,6vw,4.5rem); padding:0 1.25rem; }
body.page-course-detail .related-section .section-title {
    font-size:clamp(1.3rem,1.1rem+.7vw,1.6rem) !important; font-weight:800 !important;
    text-align:center; color:var(--ink,#1c1830) !important; -webkit-text-fill-color:initial !important;
    background:none !important; margin:0 auto 2.2rem !important; }
body.page-course-detail .related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:clamp(1rem,2vw,1.4rem); }
body.page-course-detail .related-card {
    display:flex; flex-direction:column; background:var(--surface,var(--white)) !important;
    border:1px solid var(--line,rgba(28,24,48,.09)) !important; border-radius:var(--r-lg,24px) !important;
    overflow:hidden; box-shadow:0 8px 26px -16px rgba(45,30,90,.34) !important; text-decoration:none;
    transition:transform var(--t),box-shadow var(--t),border-color var(--t); }
body.page-course-detail .related-card:hover { transform:translateY(-6px); border-color:rgba(124,58,237,.25) !important; box-shadow:0 30px 55px -26px rgba(124,58,237,.45) !important; }
body.page-course-detail .related-card-image { position:relative; aspect-ratio:16/10; overflow:hidden; }
body.page-course-detail .related-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease,cubic-bezier(.22,.61,.36,1)); }
body.page-course-detail .related-card:hover .related-card-image img { transform:scale(1.07); }
body.page-course-detail .related-card-badge { position:absolute; top:.6rem; right:.6rem; padding:.26rem .6rem; border-radius:999px;
    font-size:.66rem !important; font-weight:800; color:#fff;
    background:rgba(20,12,40,.45) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
body.page-course-detail .related-card-body { display:flex; flex-direction:column; flex:1; gap:.5rem; padding:.95rem 1rem 1rem !important; }
body.page-course-detail .related-card-title { font-size:.95rem !important; font-weight:800 !important; color:var(--ink,#1c1830) !important;
    line-height:1.5 !important; margin:0 !important; min-height:2.85em;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
body.page-course-detail .related-card-meta { display:flex; gap:1rem; font-size:.74rem !important; color:var(--muted,#6c6788) !important; }
body.page-course-detail .related-card-meta span { display:inline-flex; align-items:center; gap:.3rem; }
body.page-course-detail .related-card-meta i { color:var(--brand,#6d28d9); }
body.page-course-detail .related-card-price { margin-top:auto; padding-top:.7rem; position:relative; display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
body.page-course-detail .related-card-price::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(124,58,237,.25),transparent); }
body.page-course-detail .related-card-price-value { font-size:.95rem !important; font-weight:900 !important;
    background:var(--grad-brand,linear-gradient(135deg,#7c3aed,#ec4899)); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent; }
body.page-course-detail .related-card-cta { display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem !important; font-weight:700; color:var(--brand,#6d28d9) !important; }
/* ============================ RESPONSIVE ============================ */
@media (max-width:980px) {
    body.page-course-detail .course-main{ grid-template-columns:1fr; }
    body.page-course-detail .course-sidebar{ position:static; order:-1; }
    body.page-course-detail .course-sidebar .course-card{ max-width:520px; margin:0 auto; }
    body.page-course-detail .tabs-container{ position:static; }
}
@media (max-width:600px) {
body.page-course-detail .reviews-summary { grid-template-columns:1fr; gap:1rem; }
body.page-course-detail .rating-big { border-inline-end:none; padding-inline-end:0; border-bottom:1px solid var(--line,rgba(28,24,48,.09)); padding-bottom:1rem; }
body.page-course-detail .instructor-card { flex-direction:column; }
body.page-course-detail .related-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
body.page-course-detail .tab-content, body.page-course-detail .btn-enroll::after { animation:none !important; }
}

/* --- blog.php @ body.page-blog (Modern Premium Redesign) --- */
body.page-blog {
    --c1: #f72585; --c2: #b5179e; --c3: #7209b7; --c4: #560bad; --c5: #480ca8;
    --c6: #3a0ca3; --c7: #3f37c9; --c8: #4361ee; --c9: #4895ef; --c10: #4cc9f0;
    --white: #ffffff; --bg: #fdfbff; --text: #201a2d;
    --ink: #1a1530; --ink-2: #4a4266; --muted: #6b7280;
    --surface: #ffffff; --surface-2: #f8f6ff; --surface-3: #f3effc;
    --line: rgba(114,9,183,.12); --brand: #7209b7;
    --shadow: 0 16px 44px rgba(114,9,183,0.16);
    --sh-xs: 0 2px 8px rgba(114,9,183,.08);
    --sh-md: 0 8px 24px rgba(114,9,183,.12);
    --sh-lg: 0 18px 48px rgba(114,9,183,.18);
    --r-lg: 1.4rem;
    --ease: cubic-bezier(.2,.8,.2,1);
    --t-fast: .2s var(--ease);
    --transition: all 0.6s cubic-bezier(.23,1,.32,1);
    --radius: 24px; --radius-lg: 44px;
}
[data-theme="dark"] body.page-blog {
    --bg: #0a0a1a; --text: #e0e0ff; --white: #1a1a2e;
    --ink: #eceaf6; --ink-2: #c4c0d8; --muted: #9b96b6;
    --surface: #17142a; --surface-2: #1d1936; --surface-3: #221d40;
    --line: rgba(255,255,255,.10); --brand: #a855f7;
    --shadow: 0 18px 48px rgba(0,0,0,0.6);
}
body.page-blog > *, body.page-blog * { box-sizing: border-box; margin: 0; padding: 0; }
body.page-blog, body.page-blog {
    font-family: 'Vazirmatn', sans-serif; background: var(--bg); color: var(--text);
    line-height: 1.82; overflow-x: hidden; scroll-behavior: smooth;
}
body.page-blog a { text-decoration: none; color: inherit; transition: var(--transition); }
body.page-blog img { max-width: 100%; height: auto; display: block; }
body.page-blog .container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

/* ===== HERO — Premium Magazine Style ===== */
body.page-blog .blog-hero {
    position: relative; padding: 4rem 0 3rem; overflow: hidden;
    border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);
    box-shadow: 0 12px 35px rgba(114,9,183,.06); margin-bottom: 2.5rem;
    min-height: auto;
}
body.page-blog .blog-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(135deg, #fdf4ff 0%, #f0e8ff 35%, #e0f2fe 70%, #e0f7fa 100%);
    opacity: .92; animation: page-blog-heroGlow 12s ease infinite;
}
body.page-blog .blog-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(circle at 15% 30%, rgba(247,37,133,.12), transparent 40%),
                radial-gradient(circle at 85% 70%, rgba(67,97,238,.12), transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(76,201,240,.08), transparent 50%);
    pointer-events: none; animation: page-blog-pulse 8s ease infinite;
}
@keyframes page-blog-heroGlow {
    0%, 100% { background: linear-gradient(135deg, #fdf4ff 0%, #f0e8ff 35%, #e0f2fe 70%, #e0f7fa 100%); }
    50% { background: linear-gradient(135deg, #fef3f9 0%, #ede9ff 35%, #e0f3ff 70%, #e0fffa 100%); }
}
@keyframes page-blog-pulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}
body.page-blog .blog-hero .container { position: relative; z-index: 3; }
body.page-blog .hero-orb {
    position: absolute; border-radius: 50%; filter: blur(46px); z-index: 0; will-change: transform;
}
body.page-blog .hero-orb.o1 {
    width: 300px; height: 300px; top: -40px; right: -30px;
    background: radial-gradient(circle, rgba(168,85,247,.5), transparent 70%);
    animation: page-blog-heroFloat 9s var(--ease) infinite;
}
body.page-blog .hero-orb.o2 {
    width: 240px; height: 240px; bottom: -30px; left: -20px;
    background: radial-gradient(circle, rgba(236,72,153,.42), transparent 70%);
    animation: page-blog-heroFloat 11s var(--ease) infinite reverse;
}
@keyframes page-blog-heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

body.page-blog .hero-grid { display: block; text-align: center; }
body.page-blog .hero-content { position: relative; z-index: 3; max-width: 760px; margin-inline: auto; }
body.page-blog .hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .42rem .9rem .42rem .75rem; margin: 0 0 1.35rem; border-radius: 999px;
    background: rgba(255,255,255,.7); border: 1px solid var(--line);
    color: var(--ink-2); font-size: .8125rem; font-weight: 600;
    box-shadow: var(--sh-xs); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.page-blog .hero-eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%; position: relative; background: var(--c1);
}
body.page-blog .hero-eyebrow .dot::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    background: var(--c1); opacity: .35; animation: page-blog-heroPing 2.4s var(--ease) infinite;
}
@keyframes page-blog-heroPing {
    0% { transform: scale(.6); opacity: .5; }
    70%,100% { transform: scale(1.9); opacity: 0; }
}
body.page-blog .hero-content h1 {
    font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.05rem);
    font-weight: 800; line-height: 1.24; letter-spacing: -.025em;
    margin: 0 0 1.1rem; color: var(--ink);
    background: none; -webkit-text-fill-color: initial; animation: none; text-wrap: balance;
}
body.page-blog .hero-content h1 .grad {
    background: linear-gradient(100deg, #7c3aed 0%, #ec4899 30%, #4f6ef7 60%, #a855f7 100%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: page-blog-gradText 6s linear infinite;
}
@keyframes page-blog-gradText { to { background-position: 220% center; } }
body.page-blog .hero-content p {
    font-size: clamp(1rem, .95rem + .4vw, 1.1875rem);
    color: var(--ink-2); max-width: 48ch; line-height: 1.85;
    font-weight: 450; margin: 0 auto 1.5rem; text-align: center;
}
body.page-blog .hero-badges {
    display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; justify-content: center;
}
body.page-blog .hero-badge {
    padding: .3rem .8rem; border-radius: 999px;
    background: linear-gradient(135deg, rgba(247,37,133,.10), rgba(67,97,238,.10));
    color: var(--c3); font-weight: 700; font-size: .72rem;
    border: 1px solid rgba(114,9,183,.10); box-shadow: 0 4px 12px rgba(114,9,183,.08);
}
body.page-blog .hero-metrics {
    display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
}
body.page-blog .metric-card {
    background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 14px; padding: .55rem .8rem; box-shadow: var(--sh-md);
    display: flex; gap: .5rem; align-items: center; border: 1px solid var(--line);
    transition: transform .35s var(--ease);
}
body.page-blog .metric-card:hover { transform: translateY(-3px); }
body.page-blog .metric-icon {
    width: 32px; height: 32px; border-radius: 10px;
    background: linear-gradient(135deg, var(--c1), var(--c3));
    display: grid; place-items: center; color: white; font-size: .9rem;
    box-shadow: 0 4px 10px rgba(247,37,133,.18); flex-shrink: 0;
}
body.page-blog .metric-title { font-size: .68rem; color: var(--muted); }
body.page-blog .metric-value { font-weight: 800; font-size: .85rem; color: var(--c3); }

/* ===== BREADCRUMB ===== */
body.page-blog .blog-breadcrumb {
    display: flex; align-items: center; gap: .5rem; justify-content: center;
    margin-bottom: 1.5rem; font-size: .8rem; color: var(--muted);
}
body.page-blog .blog-breadcrumb a {
    color: var(--c3); font-weight: 600; transition: color .25s var(--ease);
}
body.page-blog .blog-breadcrumb a:hover { color: var(--c1); }
body.page-blog .blog-breadcrumb .sep { color: var(--muted); opacity: .5; }
body.page-blog .blog-breadcrumb .current { color: var(--ink-2); font-weight: 700; }

/* ===== BLOG GRID SECTION ===== */
body.page-blog .blog-section { padding: 0 0 5rem; }
body.page-blog .section-head { text-align: center; margin-bottom: 3rem; }
body.page-blog .section-title {
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
    font-weight: 800; text-align: center; margin-bottom: .8rem;
    color: var(--c3); position: relative; display: inline-block;
}
body.page-blog .section-title::after {
    content: ''; display: block; width: 60px; height: 4px;
    background: linear-gradient(90deg, var(--c1), var(--c3), var(--c8));
    border-radius: 4px; margin: .8rem auto 0;
}
body.page-blog .section-desc {
    text-align: center; color: var(--ink-2); max-width: 620px;
    margin: 0 auto 1.5rem; font-size: .95rem; line-height: 1.9;
}
body.page-blog .filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
body.page-blog .chip {
    padding: 0.4rem 0.9rem; border-radius: 999px;
    background: rgba(114,9,183,.08); color: var(--c3);
    font-weight: 700; font-size: 0.8rem;
    border: 1px solid transparent; transition: var(--transition); cursor: default;
}
body.page-blog .chip:hover {
    background: rgba(114,9,183,.16); border-color: rgba(114,9,183,.3);
    transform: translateY(-2px); box-shadow: 0 4px 14px rgba(114,9,183,.14);
}

/* ===== BLOG CARDS — Premium Glassmorphism ===== */
body.page-blog .blog-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.8rem; align-items: stretch;
}
body.page-blog .blog-card {
    background: var(--white); border-radius: 24px; overflow: hidden;
    box-shadow: 0 8px 30px rgba(114,9,183,0.08);
    border: 1px solid var(--line); position: relative; display: flex;
    flex-direction: column; height: 100%;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .5s ease;
    text-decoration: none; color: inherit; cursor: pointer;
}
body.page-blog .blog-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, rgba(247,37,133,.0), rgba(114,9,183,.0));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
body.page-blog .blog-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--c1), var(--c3), var(--c8));
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
    z-index: 2;
}
body.page-blog .blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 70px rgba(114,9,183,0.20);
    border-color: rgba(114,9,183,0.20);
}
body.page-blog .blog-card:hover::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(247,37,133,.55), rgba(114,9,183,.55));
}
body.page-blog .blog-card:hover::after { transform: scaleX(1); }

body.page-blog .blog-image {
    height: 200px; overflow: hidden; position: relative; flex-shrink: 0;
}
body.page-blog .blog-image::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,.4), transparent);
    pointer-events: none;
}
body.page-blog .blog-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
body.page-blog .blog-card:hover .blog-image img { transform: scale(1.1); }
body.page-blog .badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: linear-gradient(135deg, #f72585, #7209b7); color: #fff;
    border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.72rem; font-weight: 800;
    box-shadow: 0 6px 18px rgba(247,37,133,.4);
    animation: page-blog-badgePulse 2s ease-in-out infinite;
}
@keyframes page-blog-badgePulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(247,37,133,.4); }
    50% { box-shadow: 0 6px 28px rgba(247,37,133,.65); }
}

body.page-blog .blog-body {
    padding: 1rem 1.15rem 0.6rem; display: flex; flex-direction: column;
    gap: 0.6rem; flex: 1 1 auto;
}
body.page-blog .blog-title {
    font-size: 1.05rem; font-weight: 800; color: var(--c3); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
    min-height: calc(1.05rem * 1.5 * 2); margin: 0;
    transition: color .3s ease;
}
body.page-blog .blog-card:hover .blog-title { color: var(--c1); }
body.page-blog .blog-excerpt {
    font-size: 0.82rem; line-height: 1.75; color: var(--ink-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis; margin: 0;
}
body.page-blog .blog-meta {
    display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap;
    color: var(--muted); font-size: 0.75rem; padding-top: 0.5rem;
    border-top: 1px dashed rgba(114,9,183,.12); margin-top: 0.4rem;
}
body.page-blog .blog-meta span { display: inline-flex; align-items: center; gap: .35rem; }
body.page-blog .blog-meta i { color: var(--c1); font-size: .85rem; }

body.page-blog .blog-footer {
    display: flex; justify-content: flex-end; align-items: center;
    padding: 0.2rem 1.15rem 1rem; margin-top: auto;
}
body.page-blog .cta {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.6rem 1.25rem; border-radius: 14px;
    background: linear-gradient(135deg, #f72585, #7209b7);
    color: white; font-weight: 800; font-size: 0.82rem;
    box-shadow: 0 10px 24px rgba(247,37,133,0.28);
    width: 100%; justify-content: center;
    transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
    position: relative; overflow: hidden;
}
body.page-blog .cta::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(135deg, #7209b7, #3a0ca3);
    opacity: 0; transition: opacity .35s ease;
}
body.page-blog .cta:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(247,37,133,0.38); }
body.page-blog .cta:hover::before { opacity: 1; }
body.page-blog .cta span, body.page-blog .cta i { position: relative; z-index: 1; }
body.page-blog .cta i { transition: transform .35s ease; }
body.page-blog .cta:hover i { transform: translateX(-5px); }

body.page-blog .empty {
    grid-column: 1/-1; text-align: center; padding: 3rem; color: var(--muted);
    font-size: 1rem; background: var(--surface-2); border-radius: 20px;
    border: 1px dashed rgba(114,9,183,.2);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    body.page-blog .container { padding: 0 1rem; }
}
@media (max-width: 992px) {
    body.page-blog .blog-hero { padding: 2.5rem 0 2rem; }
    body.page-blog .hero-content p { margin-inline: auto; }
    body.page-blog .hero-badges { justify-content: center; }
    body.page-blog .hero-metrics { justify-content: center; }
    body.page-blog .blog-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }
}
@media (max-width: 768px) {
    body.page-blog .blog-hero { padding: 2rem 0 1.8rem; margin-bottom: 1.5rem; }
    body.page-blog .blog-grid { grid-template-columns: 1fr; }
    body.page-blog .blog-section { padding-bottom: 3rem; }
    body.page-blog .section-head { margin-bottom: 2rem; }
}
@media (max-width: 480px) {
    body.page-blog .blog-hero { padding: 1.5rem 0 1.5rem; }
    body.page-blog .blog-body { padding: 0.8rem; }
    body.page-blog .blog-footer { padding: 0 0.8rem 0.7rem; }
    body.page-blog .blog-grid { gap: 1.2rem; }
}

/* ===== DARK MODE ===== */
[data-theme="dark"] body.page-blog .blog-hero::before {
    background: linear-gradient(135deg, #1b1533 0%, #171429 35%, #141b33 70%, #12202e 100%) !important;
    animation: none !important; opacity: .95;
}
[data-theme="dark"] body.page-blog .blog-hero::after {
    background: radial-gradient(circle at 15% 30%, rgba(168,85,247,.16), transparent 40%),
                radial-gradient(circle at 85% 70%, rgba(67,97,238,.14), transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(76,201,240,.08), transparent 50%);
}
[data-theme="dark"] body.page-blog .hero-eyebrow {
    background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] body.page-blog .metric-card {
    background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10);
}
[data-theme="dark"] body.page-blog .blog-card { background: var(--surface); }
[data-theme="dark"] body.page-blog .blog-title { color: #b9a3e0; }
[data-theme="dark"] body.page-blog .blog-card:hover .blog-title { color: #f472b6; }
[data-theme="dark"] body.page-blog .blog-excerpt { color: var(--ink-2); }
[data-theme="dark"] body.page-blog .blog-meta { color: var(--muted); }
[data-theme="dark"] body.page-blog .empty { background: var(--surface-2); color: var(--muted); }
[data-theme="dark"] body.page-blog .blog-breadcrumb a { color: #a855f7; }
[data-theme="dark"] body.page-blog .blog-breadcrumb a:hover { color: #f472b6; }

/* --- blog_post.php @ body.page-blog-post --- */
body.page-blog-post {
            --c1: #f72585; --c2: #b5179e; --c3: #7209b7; --c4: #560bad; --c5: #480ca8;
            --c6: #3a0ca3; --c7: #3f37c9; --c8: #4361ee; --c9: #4895ef; --c10: #4cc9f0;
            --white: #ffffff; --bg: #fdfbff; --text: #201a2d;
            --ink: #1a1530; --ink-2: #4a4266; --muted: #6b7280;
            --surface: #ffffff; --surface-2: #f8f6ff; --surface-3: #f3effc;
            --line: rgba(114,9,183,.12); --brand: #7209b7;
            --shadow: 0 18px 48px rgba(114,9,183,0.18);
            --sh-xs: 0 2px 8px rgba(114,9,183,.08);
            --sh-md: 0 8px 24px rgba(114,9,183,.12);
            --sh-lg: 0 18px 48px rgba(114,9,183,.18);
            --r-lg: 1.4rem;
            --ease: cubic-bezier(.2,.8,.2,1);
            --radius: 24px; --radius-lg: 44px;
            --transition: all 0.6s cubic-bezier(.23,1,.32,1);
        }
[data-theme="dark"] body.page-blog-post {
            --bg: #0a0a1a; --text: #e0e0ff; --white: #1a1a2e;
            --ink: #eceaf6; --ink-2: #c4c0d8; --muted: #9b96b6;
            --surface: #17142a; --surface-2: #1d1936; --surface-3: #221d40;
            --line: rgba(255,255,255,.10); --brand: #a855f7;
            --shadow: 0 18px 48px rgba(0,0,0,0.6);
        }
body.page-blog-post > *, body.page-blog-post *, body.page-blog-post *::before, body.page-blog-post *::after { margin:0; padding:0; box-sizing:border-box; font-family:'Vazirmatn', sans-serif !important; }
/* keep Tabler icon font on icon elements (the * rule above would override it) */
body.page-blog-post i.ti, body.page-blog-post .ti, body.page-blog-post [class^="ti-"], body.page-blog-post [class*=" ti-"],
body.page-blog-post i.ti::before, body.page-blog-post .ti::before, body.page-blog-post [class^="ti-"]::before, body.page-blog-post [class*=" ti-"]::before { font-family:'tabler-icons' !important; }
body.page-blog-post { background: var(--bg); color: var(--text); line-height: 1.9; overflow-x: hidden; }
body.page-blog-post img { max-width: 100%; display: block; }
body.page-blog-post a { text-decoration: none; color: inherit; transition: var(--transition); }
body.page-blog-post .container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
body.page-blog-post /* Hero — magazine cover (unique to article page) */
        .hero {
            position: relative;
            min-height: 480px;
            display: flex;
            align-items: flex-end;
            padding: 0;
            overflow: hidden;
            border-bottom-left-radius: var(--radius-lg);
            border-bottom-right-radius: var(--radius-lg);
            box-shadow: 0 22px 55px rgba(20,12,40,.22);
            margin-bottom: 2.4rem;
        }
body.page-blog-post .hero-cover { position: absolute; inset: 0; z-index: 0; }
body.page-blog-post .hero-cover__img {
            width: 100%; height: 100%; object-fit: cover; display: block;
            transform: scale(1.06);
            animation: page-blog-post-coverZoom 20s ease-in-out infinite alternate;
        }
@keyframes page-blog-post-coverZoom { from { transform: scale(1.06); } to { transform: scale(1.16); } }
body.page-blog-post .hero-cover__overlay {
            position: absolute; inset: 0;
            background:
                linear-gradient(180deg, rgba(12,8,26,.55) 0%, rgba(12,8,26,.62) 45%, rgba(10,6,22,.96) 100%),
                linear-gradient(115deg, rgba(74,6,120,.6), rgba(114,9,183,.35) 45%, rgba(10,6,22,.35) 75%);
        }
body.page-blog-post .hero-grain {
            position: absolute; inset: 0; pointer-events: none; opacity: .5;
            background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
            background-size: 26px 26px;
            -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
            mask-image: linear-gradient(180deg, transparent, #000 60%);
        }
body.page-blog-post .hero .container { position: relative; z-index: 2; width: 100%; }
body.page-blog-post .hero-inner { padding: 3rem 0 2.4rem; max-width: 860px; }
body.page-blog-post .hero-crumbs {
            display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
            font-size: .8rem; font-weight: 600; margin-bottom: 1.1rem;
            color: rgba(255,255,255,.92);
            text-shadow: 0 2px 10px rgba(0,0,0,.7);
        }
body.page-blog-post .hero-crumbs a { color: rgba(255,255,255,.82); }
body.page-blog-post .hero-crumbs a:hover { color: #fff; }
body.page-blog-post .hero-crumbs span { opacity: .55; }
body.page-blog-post .hero-crumbs .current { color: #fff; opacity: 1; }
body.page-blog-post .hero-cat {
            display: inline-flex; align-items: center; gap: .45rem;
            padding: .42rem 1rem; margin-bottom: 1.1rem; border-radius: 999px;
            background: linear-gradient(135deg, var(--c1), var(--c3));
            color: #fff; font-weight: 800; font-size: .78rem; letter-spacing: .01em;
            box-shadow: 0 10px 26px rgba(247,37,133,.4);
        }
body.page-blog-post .hero-cat svg { width: 15px; height: 15px; stroke: currentColor; }
body.page-blog-post .hero-title {
            font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.4rem) !important;
            font-weight: 900;
            line-height: 1.32;
            letter-spacing: -.02em;
            margin: 2rem 0 2rem !important;
            color: #fff;
            background: none;
            -webkit-text-fill-color: initial;
            text-wrap: balance;
            text-shadow: 0 2px 8px rgba(0,0,0,.55), 0 6px 30px rgba(0,0,0,.65);
        }
body.page-blog-post .hero-meta {
            display: flex; flex-wrap: wrap; gap: .55rem; align-items: center;
        }
body.page-blog-post .pill {
            padding: .45rem .95rem; border-radius: 999px;
            background: rgba(20,12,40,.42); color: #fff;
            font-weight: 700; font-size: .78rem;
            border: 1px solid rgba(255,255,255,.32);
            box-shadow: 0 6px 18px rgba(0,0,0,.3);
            text-shadow: 0 1px 6px rgba(0,0,0,.5);
            display: inline-flex; align-items: center; gap: 5px;
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        }
body.page-blog-post .hero-like {
            display: inline-flex; align-items: center; gap: .4rem;
            padding: .45rem 1.05rem; border-radius: 999px;
            background: rgba(20,12,40,.42); color: #fff;
            font-weight: 800; font-size: .78rem;
            border: 1px solid rgba(255,255,255,.32);
            box-shadow: 0 6px 18px rgba(0,0,0,.3);
            text-shadow: 0 1px 6px rgba(0,0,0,.5);
            cursor: pointer; font-family: inherit;
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
        }
body.page-blog-post .hero-like svg { width: 14px; height: 14px; stroke: currentColor; transition: transform .25s ease; }
body.page-blog-post .hero-like:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, var(--c1), var(--c3));
            color: #fff; border-color: transparent;
            box-shadow: 0 12px 26px rgba(247,37,133,0.42);
        }
body.page-blog-post .hero-like:hover svg { transform: scale(1.15); }
body.page-blog-post .hero-like.is-active {
            background: linear-gradient(135deg, var(--c1), var(--c3));
            color: #fff; border-color: transparent;
            box-shadow: 0 10px 22px rgba(247,37,133,0.4);
        }
body.page-blog-post .hero-like:disabled { cursor: not-allowed; }
body.page-blog-post .hero-like:disabled:hover { transform: none; }
/* The cover hero is dark-overlaid in both themes, so text/glass are theme-agnostic. */
[data-theme="dark"] body.page-blog-post .reactions button,
[data-theme="dark"] body.page-blog-post .reactions .react-share {
            background: var(--surface); border-color: var(--line);
        }
body.page-blog-post /* Body */
        .featured-img {
            margin: 3rem 0;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: 0 26px 72px rgba(114,9,183,0.18);
        }
body.page-blog-post .featured-img img { width: 100%; transition: transform 1.6s ease; }
body.page-blog-post .featured-img:hover img { transform: scale(1.05); }
body.page-blog-post .post-content {
            font-size: 1rem !important;
            line-height: 2.05;
            margin: 1.6rem auto;
            max-width: 780px;
            color: var(--text);
            background: var(--white);
            border: 1.5px solid var(--line);
            border-radius: 20px;
            box-shadow: 0 14px 40px rgba(114,9,183,0.10);
            padding: 2rem 2.2rem;
        }
body.page-blog-post .post-content h2, body.page-blog-post .post-content h3, body.page-blog-post .post-content h4 {
            color: var(--c3);
            margin: 1.1rem 0 0.55rem;
            line-height: 1.4;
        }
body.page-blog-post .post-content img {
            border-radius: 14px;
            margin: 1.2rem 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.10);
            max-width: 100%;
            height: auto;
        }
body.page-blog-post .post-content p, body.page-blog-post .post-content li, body.page-blog-post .post-content span, body.page-blog-post .post-content div { font-size: 1rem !important; line-height: 2.05 !important; }
body.page-blog-post .post-content h2 {
            font-size: 1.2rem !important;
            font-weight: 800;
            border-right: 4px solid var(--c1);
            padding-right: 12px;
            margin-top: 1.6rem;
            margin-bottom: 0.7rem;
            background: linear-gradient(135deg, rgba(247,37,133,0.04), transparent);
            padding: 0.5rem 1rem;
            border-radius: 0 10px 10px 0;
        }
body.page-blog-post .post-content h3 {
            font-size: 1.08rem !important;
            font-weight: 700;
            color: var(--c4);
            margin-top: 1.4rem;
            margin-bottom: 0.6rem;
            display: inline-block;
            border-bottom: 2px solid rgba(114,9,183,0.15);
            padding-bottom: 0.3rem;
        }
/* حالت تاریک: بنفش تیرهٔ سرتیترهای h3 روشن‌تر شود تا چشم اذیت نشود */
[data-theme="dark"] body.page-blog-post .post-content h3 { color: #c4a2ff; }

/* حالت تاریک: هیچ متنی نباید بنفش تیره باشد؛ طیف روشن آبی/بنفش/سفید/صورتی */
[data-theme="dark"] body.page-blog-post .post-content h2,
[data-theme="dark"] body.page-blog-post .post-content h4 { color: #c4a2ff; }
[data-theme="dark"] body.page-blog-post .post-content strong { color: #d9b8ff; }
[data-theme="dark"] body.page-blog-post .post-content em { color: #ff8fc0; }
[data-theme="dark"] body.page-blog-post .post-content a {
    color: #7cc4ff;
    text-decoration-color: rgba(124,196,255,.4);
}
[data-theme="dark"] body.page-blog-post .post-content a:hover { color: #ff8fc0; }
/* بازنویسی رنگ‌های اینلاین بنفش/آبی تیره‌ی داخل محتوای مقاله */
[data-theme="dark"] body.page-blog-post .post-content [style*="#7209b7"],
[data-theme="dark"] body.page-blog-post .post-content [style*="#7209B7"] { color: #c4a2ff !important; }
[data-theme="dark"] body.page-blog-post .post-content [style*="#4361ee"],
[data-theme="dark"] body.page-blog-post .post-content [style*="#4361EE"] { color: #8ab4ff !important; }
body.page-blog-post .post-content h4 { font-size: 0.98rem !important; }
body.page-blog-post .post-content p { margin: 0 0 0.75rem; }
body.page-blog-post .post-content p.lead {
            font-size: 0.98rem !important;
            font-weight: 500;
            color: var(--ink);
            background: linear-gradient(135deg, rgba(247,37,133,0.06), rgba(76,201,240,0.06));
            border-right: 4px solid var(--c3);
            border-radius: 12px;
            padding: 13px 16px;
            line-height: 1.85;
        }
body.page-blog-post .post-content strong { color: var(--c4); font-weight: 700; }
body.page-blog-post .post-content em { color: var(--c1); font-style: normal; font-weight: 600; }
body.page-blog-post .post-content ul, body.page-blog-post .post-content ol {
            background: var(--surface-2);
            border-radius: 14px;
            padding: 18px 38px 18px 22px;
            margin: 1.4rem 0 1.8rem;
            box-shadow: 0 6px 22px rgba(114,9,183,0.06);
        }
body.page-blog-post .post-content ul li, body.page-blog-post .post-content ol li {
            margin-bottom: 0.55rem;
            line-height: 1.95;
            position: relative;
        }
body.page-blog-post .post-content ul li::marker { color: var(--c1); font-size: 1.1em; }
body.page-blog-post .post-content ol li::marker { color: var(--c3); font-weight: 700; }
body.page-blog-post .post-content a {
            color: var(--c3);
            text-decoration: underline;
            text-decoration-color: rgba(114,9,183,0.35);
            text-underline-offset: 4px;
            transition: color 0.2s;
        }
body.page-blog-post .post-content a:hover { color: var(--c1); }
body.page-blog-post /* Table styling */
        .post-content .table-responsive {
            overflow-x: auto;
            margin: 2rem 0;
            border-radius: 16px;
            box-shadow: 0 14px 42px rgba(114,9,183,0.10);
        }
body.page-blog-post .post-content table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: var(--white);
            font-size: 0.98rem;
            overflow: hidden;
            border-radius: 16px;
        }
body.page-blog-post .post-content table thead {
            background: linear-gradient(135deg, var(--c3), var(--c8));
        }
body.page-blog-post .post-content table thead th {
            color: #fff;
            font-weight: 700;
            padding: 16px 14px;
            text-align: center;
            font-size: 1rem;
            border: none;
            white-space: nowrap;
        }
body.page-blog-post .post-content table tbody td {
            padding: 14px 14px;
            text-align: center;
            border-bottom: 1px solid var(--line);
            color: var(--text);
            vertical-align: middle;
        }
body.page-blog-post .post-content table tbody tr:nth-child(even) td { background: var(--surface-2); }
body.page-blog-post .post-content table tbody tr:hover td { background: var(--surface-3); }
body.page-blog-post .post-content table tbody tr:last-child td { border-bottom: none; }
body.page-blog-post .post-content table tbody td:first-child {
            font-weight: 700;
            color: var(--c3);
        }
[data-theme="dark"] body.page-blog-post .post-content table tbody td:first-child { color: #c4a2ff; }
body.page-blog-post /* CTA box override */
        .post-content .cta-box {
            box-shadow: 0 22px 60px rgba(114,9,183,0.28);
            border-radius: 18px;
            padding: 1.6rem 2rem;
            margin: 2rem 0;
            background: linear-gradient(135deg, var(--c3), var(--c8));
            color: #fff;
            text-align: center;
        }
body.page-blog-post .post-content .cta-box p { color: rgba(255,255,255,0.95); font-size: 1rem !important; }
body.page-blog-post .post-content .cta-box a {
            color: #fff !important;
            text-decoration-color: rgba(255,255,255,0.5) !important;
            font-weight: 700;
        }
body.page-blog-post .post-content .cta-box a:hover { opacity: 0.92; }
body.page-blog-post /* Blockquote – elegant pull-quote */
        .post-content blockquote {
            margin: 1.8rem 0;
            padding: 1.2rem 1.8rem;
            border: none;
            border-right: 5px solid var(--c1);
            background: linear-gradient(135deg, rgba(247,37,133,0.06), rgba(114,9,183,0.04));
            border-radius: 0 16px 16px 0;
            font-size: 1.02rem !important;
            font-weight: 500;
            line-height: 2;
            color: var(--ink);
            box-shadow: 0 4px 16px rgba(114,9,183,0.06);
        }
body.page-blog-post .post-content blockquote p {
            font-size: 1.02rem !important;
            line-height: 2 !important;
            margin: 0;
        }
[data-theme="dark"] body.page-blog-post .post-content blockquote {
            background: linear-gradient(135deg, rgba(247,37,133,0.1), rgba(114,9,183,0.08));
            border-right-color: #ff8fc0;
            color: #e0d8ff;
        }
body.page-blog-post /* Code blocks – clean & modern */
        .post-content pre {
            background: #1a1530;
            color: #e8e0ff;
            padding: 1.2rem 1.4rem;
            border-radius: 14px;
            overflow-x: auto;
            direction: ltr;
            text-align: left;
            font-size: 0.85rem !important;
            line-height: 1.7 !important;
            margin: 1.4rem 0;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.2);
            font-family: 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
        }
body.page-blog-post .post-content pre code {
            background: none;
            padding: 0;
            font-size: 0.85rem !important;
            line-height: 1.7 !important;
            color: inherit;
        }
body.page-blog-post .post-content code {
            background: rgba(114,9,183,0.1);
            padding: 0.15em 0.4em;
            border-radius: 6px;
            font-size: 0.85em;
            color: var(--c3);
        }
[data-theme="dark"] body.page-blog-post .post-content code {
            background: rgba(168,85,247,0.15);
            color: #c4a2ff;
        }
[data-theme="dark"] body.page-blog-post .post-content pre {
            background: #0d0a1a;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.4);
        }
@media (max-width: 640px) {
body.page-blog-post /* جدول‌ها در موبایل: کوچک، بدون اسکرول افقی */
            .post-content .table-responsive {
                overflow-x: hidden !important;
                margin: 1.2rem 0;
            }
body.page-blog-post .post-content table {
                font-size: 0.62rem !important;
                table-layout: fixed !important;
                width: 100% !important;
                word-wrap: break-word !important;
                overflow-wrap: anywhere !important;
            }
body.page-blog-post .post-content table thead th {
                font-size: 0.62rem !important;
                padding: 6px 4px !important;
                white-space: normal !important;
                word-wrap: break-word !important;
                overflow-wrap: anywhere !important;
                line-height: 1.4 !important;
            }
body.page-blog-post .post-content table tbody td {
                padding: 6px 4px !important;
                font-size: 0.62rem !important;
                white-space: normal !important;
                word-wrap: break-word !important;
                overflow-wrap: anywhere !important;
                line-height: 1.5 !important;
            }
body.page-blog-post .post-content h2 { font-size: 1.05rem !important; }
body.page-blog-post .post-content h3 { font-size: 0.95rem !important; }
body.page-blog-post .post-content ul, body.page-blog-post .post-content ol { padding: 14px 28px 14px 14px; }
body.page-blog-post .post-content { padding: 1.2rem 1rem; }
body.page-blog-post .post-content p, body.page-blog-post .post-content li, body.page-blog-post .post-content span, body.page-blog-post .post-content div { font-size: 0.95rem !important; line-height: 2 !important; }
body.page-blog-post .post-content blockquote { margin: 1.2rem 0; padding: 0.8rem 1rem; }
body.page-blog-post .post-content pre { font-size: 0.75rem !important; padding: 0.8rem 1rem; }
body.page-blog-post .post-content .cta-box { padding: 1.2rem 1rem; margin: 1.2rem 0; }
body.page-blog-post .hero-title { font-size: 1.3rem !important; }
body.page-blog-post .hero { min-height: 320px; }
body.page-blog-post .hero-inner { padding: 2rem 0 1.6rem; }
}
body.page-blog-post .info-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
            gap: 0.7rem;
            margin: 1.4rem 0;
        }
body.page-blog-post .info-card {
            background: rgba(255,255,255,0.7);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 0.6rem 0.85rem;
            box-shadow: var(--sh-xs);
            display: flex;
            align-items: center;
            gap: 0.6rem;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
body.page-blog-post .info-icon {
            width: 32px; height: 32px; border-radius: 10px;
            background: linear-gradient(135deg, var(--c1), var(--c3));
            color: white; display: grid; place-items: center;
            box-shadow: 0 6px 14px rgba(247,37,133,0.22);
            flex-shrink: 0;
        }
body.page-blog-post .info-icon svg { width: 16px; height: 16px; stroke: #fff; }
body.page-blog-post .info-text { font-weight: 800; color: var(--c3); font-size: 0.88rem; line-height: 1.3; }
body.page-blog-post .info-sub { font-size: 0.74rem; color: var(--muted); margin-top: 1px; }
body.page-blog-post .pill svg { width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px; stroke: currentColor; }
body.page-blog-post .reactions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            margin: 2.2rem 0;
            justify-content: center;
        }
body.page-blog-post .reactions button, body.page-blog-post .reactions .react-share {
            display: inline-flex; align-items: center; gap: 0.45rem;
            padding: 0.55rem 1.05rem;
            background: var(--white);
            border: 1px solid rgba(114,9,183,0.14);
            border-radius: 999px;
            font-weight: 700;
            font-size: 0.86rem;
            color: var(--ink-2);
            cursor: pointer;
            transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
            box-shadow: 0 4px 14px rgba(114,9,183,0.08);
            font-family: inherit;
        }
body.page-blog-post .reactions button svg, body.page-blog-post .reactions .react-share svg {
            width: 16px; height: 16px; stroke: currentColor;
            transition: transform .25s ease;
        }
body.page-blog-post .reactions button:hover, body.page-blog-post .reactions .react-share:hover {
            transform: translateY(-3px);
            background: linear-gradient(135deg, var(--c1), var(--c3));
            color: #fff;
            border-color: transparent;
            box-shadow: 0 12px 26px rgba(247,37,133,0.28);
        }
body.page-blog-post .reactions button:hover svg { transform: scale(1.15); }
body.page-blog-post .reactions button.is-active {
            background: linear-gradient(135deg, var(--c1), var(--c3));
            color: #fff; border-color: transparent;
            box-shadow: 0 10px 22px rgba(247,37,133,0.32);
        }
body.page-blog-post .comments-section {
            background: var(--white);
            padding: 1.6rem 1.7rem;
            border-radius: 18px;
            box-shadow: 0 10px 30px rgba(114,9,183,0.08);
            margin: 2.4rem 0;
            border: 1px solid var(--line);
        }
body.page-blog-post .comments-section h2 {
            font-size: 1.1rem !important;
            margin-bottom: 1rem !important;
            color: var(--c3);
            font-weight: 800;
            display: flex; align-items: center; gap: 0.5rem;
        }
body.page-blog-post .comment-card {
            background: var(--surface-2);
            padding: 0.85rem 1rem;
            border-radius: 12px;
            margin-bottom: 0.6rem;
            border: 1px solid var(--line);
            font-size: 0.88rem;
        }
body.page-blog-post .comment-form { display: flex; flex-direction: column; gap: 0.55rem; }
body.page-blog-post .comment-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
body.page-blog-post .comment-form input, body.page-blog-post .comment-form textarea {
            padding: 0.65rem 0.85rem;
            border: 1px solid var(--line);
            border-radius: 10px;
            font-size: 0.86rem;
            font-family: inherit;
            background: var(--surface-2);
            color: var(--text);
            transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
            width: 100%;
            box-sizing: border-box;
        }
body.page-blog-post .comment-form input:focus, body.page-blog-post .comment-form textarea:focus {
            outline: none;
            border-color: var(--c3);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(114,9,183,.12);
        }
body.page-blog-post .comment-form textarea { resize: vertical; min-height: 90px; }
body.page-blog-post .comment-form button {
            align-self: flex-end;
            padding: 0.65rem 1.4rem;
            background: linear-gradient(135deg, var(--c1), var(--c3));
            color: #fff; border: none; border-radius: 10px;
            font-size: 0.88rem; font-weight: 800; cursor: pointer;
            box-shadow: 0 8px 20px rgba(247,37,133,0.25);
            transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
            display: inline-flex; align-items: center; gap: 0.4rem;
        }
body.page-blog-post .comment-form button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(247,37,133,0.35); filter: brightness(1.05); }
body.page-blog-post .comment-form button svg { width: 15px; height: 15px; stroke: #fff; }
@media (max-width: 560px) {
body.page-blog-post .comment-form .row-2 { grid-template-columns: 1fr; }
}
body.page-blog-post .related-posts h3 {
            text-align: center;
            font-size: 1.3rem;
            margin-bottom: 1.6rem;
            color: var(--c3);
        }
body.page-blog-post .related-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 1.1rem;
        }
body.page-blog-post .related-card {
            background: var(--white);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 10px 26px rgba(114,9,183,0.10);
            transition: var(--transition);
            border: 1px solid var(--line);
            display: flex;
            flex-direction: column;
        }
body.page-blog-post .related-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(114,9,183,0.18); }
body.page-blog-post .related-card img { width: 100%; height: 130px; object-fit: cover; }
body.page-blog-post .related-card .rc-body { padding: 0.85rem 0.95rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
body.page-blog-post .related-card .rc-title {
            font-size: 0.85rem;
            margin: 0;
            color: var(--c3);
            font-weight: 800;
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
body.page-blog-post .related-card .rc-btn {
            margin-top: auto;
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.42rem 0.85rem;
            font-size: 0.74rem;
            font-weight: 700;
            color: #fff;
            background: linear-gradient(135deg, var(--c1), var(--c3));
            border-radius: 999px;
            box-shadow: 0 6px 16px rgba(247,37,133,0.25);
            transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
        }
body.page-blog-post .related-card:hover .rc-btn { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(247,37,133,0.35); filter: brightness(1.06); }
body.page-blog-post .related-card .rc-btn svg { width: 12px; height: 12px; stroke: #fff; }
body.page-blog-post .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 1rem 2rem;
            background: linear-gradient(135deg, var(--c1), var(--c3));
            color: white;
            font-weight: 800;
            border-radius: 999px;
            box-shadow: 0 22px 60px rgba(247,37,133,0.32);
            margin: 3rem auto;
        }
body.page-blog-post .back-btn:hover { transform: translateY(-4px); }
@media (max-width: 1024px) {
body.page-blog-post .container { padding: 0 1.2rem; }
body.page-blog-post .hero { min-height: 420px; }
body.page-blog-post .hero-inner { padding: 2.4rem 0 2rem; }
}
@media (max-width: 768px) {
body.page-blog-post .hero { min-height: 360px; margin-bottom: 1.6rem; }
body.page-blog-post .hero-inner { padding: 2rem 0 1.7rem; }
body.page-blog-post .post-content { font-size: 0.88rem; line-height: 1.95; padding: 1.3rem 1.2rem; }
body.page-blog-post .comments-section { padding: 2rem 1.4rem; }
}
@media (max-width: 480px) {
body.page-blog-post .hero { min-height: 320px; }
body.page-blog-post .hero-inner { padding: 1.6rem 0 1.4rem; }
body.page-blog-post .post-content { font-size: 0.84rem; padding: 1.1rem 1rem; }
}

/* --- learning-path.php @ body.page-learning-path --- */
body.page-learning-path {
            --c1: #f72585; --c2: #b5179e; --c3: #7209b7; --c4: #560bad; --c5: #480ca8;
            --c6: #3a0ca3; --c7: #3f37c9; --c8: #4361ee; --c9: #4895ef; --c10: #4cc9f0;
            --white: #ffffff; --gray-light: #f8f9fa; --gray-dark: #212529;
            --primary: var(--c3); --accent: var(--c1); --bg: var(--white); --text: var(--gray-dark);
            --muted: #6b7280;
            --shadow: 0 12px 32px rgba(114,9,183,.15);
            --shadow-lg: 0 24px 60px rgba(114,9,183,.22);
            --transition: all .4s cubic-bezier(.2,.8,.2,1);
            --radius: 1.8rem; --radius-sm: 1.2rem;
        }
body.page-learning-path > *, body.page-learning-path * { box-sizing: border-box; margin: 0; padding: 0; }
body.page-learning-path { scroll-behavior: smooth; }
body.page-learning-path, body.page-learning-path {
            font-family: 'Vazirmatn', sans-serif;
            background: var(--bg); color: var(--text);
            line-height: 1.8; overflow-x: hidden;
        }
body.page-learning-path a { text-decoration: none; color: inherit; transition: var(--transition); }
body.page-learning-path img { max-width: 100%; height: auto; display: block; }
body.page-learning-path .lp-container { max-width: 940px; margin: 0 auto; padding: 0 1.2rem; }
body.page-learning-path /* ===== HERO ===== */
        .lp-hero {
            position: relative;
            padding: 5rem 0 3.4rem;
            text-align: center;
            overflow: hidden;
            background:
                radial-gradient(1000px 480px at 78% -12%, rgba(67,97,238,.16), transparent 60%),
                radial-gradient(760px 460px at 10% -6%, rgba(247,37,133,.14), transparent 60%),
                radial-gradient(700px 520px at 50% 120%, rgba(76,201,240,.12), transparent 60%);
        }
body.page-learning-path /* subtle dotted grid overlay */
        .lp-hero::before {
            content: ''; position: absolute; inset: 0; z-index: 0; opacity: .5;
            background-image: radial-gradient(rgba(114,9,183,.12) 1px, transparent 1px);
            background-size: 26px 26px;
            -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
        }
body.page-learning-path .lp-hero .blob {
            position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; z-index: 0;
        }
body.page-learning-path .lp-hero .blob.b1 { width: 380px; height: 380px; background: rgba(114,9,183,.28); top: -130px; right: -90px; animation: page-learning-path-float1 14s ease-in-out infinite; }
body.page-learning-path .lp-hero .blob.b2 { width: 320px; height: 320px; background: rgba(76,201,240,.3); bottom: -150px; left: -70px; animation: page-learning-path-float2 16s ease-in-out infinite; }
body.page-learning-path .lp-hero .blob.b3 { width: 260px; height: 260px; background: rgba(247,37,133,.22); top: 40%; left: 38%; animation: page-learning-path-float1 19s ease-in-out infinite; }
@keyframes page-learning-path-float1 { 50% { transform: translate(-30px, 40px) scale(1.1); } }
@keyframes page-learning-path-float2 { 50% { transform: translate(40px, -30px) scale(1.08); } }
body.page-learning-path .lp-hero-inner { position: relative; z-index: 1; }
body.page-learning-path .lp-eyebrow {
            display: inline-flex; align-items: center; gap: .5rem;
            background: rgba(255,255,255,.6); color: var(--c3);
            padding: .55rem 1.2rem; border-radius: 999px;
            font-weight: 700; font-size: .92rem; margin-bottom: 1.5rem;
            border: 1px solid rgba(114,9,183,.18);
            box-shadow: 0 6px 20px rgba(114,9,183,.1); backdrop-filter: blur(8px);
        }
body.page-learning-path .lp-eyebrow svg { width: 18px; height: 18px; }
body.page-learning-path .lp-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 0 0 rgba(247,37,133,.5); animation: page-learning-path-pulse 2s infinite; }
@keyframes page-learning-path-pulse { 0% { box-shadow: 0 0 0 0 rgba(247,37,133,.5); } 70% { box-shadow: 0 0 0 8px rgba(247,37,133,0); } 100% { box-shadow: 0 0 0 0 rgba(247,37,133,0); } }
body.page-learning-path .lp-hero h1 {
            font-size: clamp(2.4rem, 5.8vw, 4rem); font-weight: 900; line-height: 1.18;
            letter-spacing: -1px; margin-bottom: 1.2rem;
        }
body.page-learning-path .lp-hero h1 .grad {
            background: linear-gradient(90deg, var(--c1), var(--c3), var(--c8), var(--c10), var(--c1));
            background-size: 250% auto;
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
            animation: page-learning-path-shine 6s linear infinite;
        }
@keyframes page-learning-path-shine { to { background-position: 250% center; } }
body.page-learning-path .lp-hero p.lead {
            max-width: 660px; margin: 0 auto 2.2rem; color: var(--muted);
            font-size: clamp(1rem, 2.2vw, 1.16rem);
            text-align: center;
        }
body.page-learning-path .lp-stats {
            display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: .5rem;
        }
body.page-learning-path .lp-stat {
            background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9);
            border-radius: var(--radius-sm);
            padding: 1rem 1.7rem; min-width: 132px;
            box-shadow: 0 14px 34px rgba(114,9,183,.1); backdrop-filter: blur(10px);
            transition: var(--transition);
        }
body.page-learning-path .lp-stat:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(114,9,183,.16); }
body.page-learning-path .lp-stat b {
            display: block; font-size: 1.85rem; font-weight: 900; line-height: 1;
            background: linear-gradient(90deg, var(--c3), var(--c8));
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
body.page-learning-path .lp-stat span { font-size: .88rem; color: var(--muted); }
body.page-learning-path /* ===== TRACK TABS ===== */
        .lp-tabs-wrap {
            position: sticky; top: 0; z-index: 30;
            background: rgba(255,255,255,.78); backdrop-filter: blur(18px) saturate(140%);
            border-bottom: 1px solid rgba(114,9,183,.08);
            padding: 1rem 0; box-shadow: 0 6px 24px rgba(0,0,0,.03);
        }
body.page-learning-path .lp-tabs {
            display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center;
        }
body.page-learning-path .lp-tab {
            display: inline-flex; align-items: center; gap: .55rem;
            padding: .72rem 1.25rem; border-radius: 999px; cursor: pointer;
            font-weight: 700; font-size: .96rem; color: var(--text);
            background: rgba(255,255,255,.55); border: 1.5px solid rgba(114,9,183,.1);
            box-shadow: 0 4px 14px rgba(17,12,46,.05); backdrop-filter: blur(8px);
            transition: var(--transition); user-select: none;
        }
body.page-learning-path .lp-tab svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; }
body.page-learning-path .lp-tab:hover { transform: translateY(-2px); background: rgba(255,255,255,.85); border-color: rgba(114,9,183,.2); box-shadow: 0 10px 24px rgba(114,9,183,.12); }
body.page-learning-path .lp-tab.active { color: #fff; border-color: transparent; box-shadow: 0 14px 30px rgba(114,9,183,.32); transform: translateY(-2px); }
body.page-learning-path .lp-tab .count {
            font-size: .76rem; font-weight: 800; background: rgba(0,0,0,.08);
            padding: .12rem .55rem; border-radius: 999px; line-height: 1.4;
        }
body.page-learning-path .lp-tab.active .count { background: rgba(255,255,255,.28); }
body.page-learning-path /* ===== ROADMAP ===== */
        .lp-section { padding: 3.4rem 0 4.5rem; }
body.page-learning-path .lp-track { display: none; }
body.page-learning-path .lp-track.active { display: block; animation: page-learning-path-fadeUp .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes page-learning-path-fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
body.page-learning-path .lp-track-head {
            display: flex; align-items: center; gap: 1rem; margin-bottom: 2.4rem;
            padding: 1.3rem 1.5rem; border-radius: 16px;
            color: #fff; box-shadow: var(--shadow-lg), 0 18px 40px color-mix(in srgb, var(--tc, #7209b7) 26%, transparent);
            position: relative; overflow: hidden;
        }
body.page-learning-path .lp-track-head::after {
            content: ''; position: absolute; inset: 0;
            background:
                radial-gradient(420px 220px at 88% -20%, rgba(255,255,255,.22), transparent 60%),
                radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
            background-size: auto, 22px 22px;
        }
body.page-learning-path .lp-track-head .th-icon {
            width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px;
            background: rgba(255,255,255,.2); display: grid; place-items: center;
            border: 1px solid rgba(255,255,255,.3); position: relative; z-index: 1;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
        }
body.page-learning-path .lp-track-head .th-icon svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.page-learning-path .lp-track-head .th-text { position: relative; z-index: 1; flex: 1; }
body.page-learning-path .lp-track-head h2 { font-size: 1.12rem; font-weight: 900; margin-bottom: .3rem; }
body.page-learning-path .lp-track-head p { opacity: .94; font-size: .86rem; max-width: 580px; }
body.page-learning-path .lp-track-head .th-chip {
            position: relative; z-index: 1; flex-shrink: 0;
            display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
            min-width: 58px; padding: .5rem .75rem; border-radius: 1rem;
            background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
            line-height: 1;
        }
body.page-learning-path .lp-track-head .th-chip b { font-size: 1.25rem; font-weight: 900; }
body.page-learning-path .lp-track-head .th-chip span { font-size: .68rem; opacity: .9; margin-top: .25rem; }
body.page-learning-path /* timeline */
        .lp-timeline { position: relative; }
body.page-learning-path .lp-timeline::before {
            content: ''; position: absolute; top: 18px; bottom: 18px; right: 30px; width: 4px;
            border-radius: 4px;
            background: linear-gradient(180deg, var(--tc, var(--c3)), rgba(67,97,238,.25));
        }
body.page-learning-path /* animated travelling glow along the spine */
        .lp-timeline::after {
            content: ''; position: absolute; right: 27px; width: 10px; height: 10px; border-radius: 50%;
            background: var(--tc, var(--c3)); box-shadow: 0 0 14px 3px var(--tc, var(--c3));
            animation: page-learning-path-travel 4.5s ease-in-out infinite; top: 18px;
        }
@keyframes page-learning-path-travel { 0%,100% { top: 18px; opacity: .2; } 50% { top: calc(100% - 28px); opacity: 1; } }
body.page-learning-path .lp-step { position: relative; padding: 0 5.4rem 1.6rem 0; }
body.page-learning-path .lp-step:last-child { padding-bottom: 0; }
body.page-learning-path .lp-node {
            position: absolute; top: 50%; transform: translateY(-50%); right: 11px;
            width: 38px; height: 38px;
            border-radius: 50%; display: grid; place-items: center; z-index: 2;
            color: #fff; font-weight: 900; font-size: .95rem;
            box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 0 0 6px color-mix(in srgb, var(--tc, #7209b7) 14%, transparent);
            border: 4px solid #fff;
            transition: var(--transition);
        }
body.page-learning-path .lp-step:hover .lp-node { transform: translateY(-50%) scale(1.12) rotate(-4deg); box-shadow: 0 14px 28px rgba(0,0,0,.26), 0 0 0 8px color-mix(in srgb, var(--tc, #7209b7) 22%, transparent); }
body.page-learning-path /* dotted connector from spine to card */
        .lp-step::after {
            content: ''; position: absolute; top: 50%; right: 56px; width: 30px; height: 2px;
            background: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 4px, transparent 4px 8px);
            transform: translateY(-50%);
        }
body.page-learning-path .lp-card {
            display: flex; align-items: center; gap: .9rem;
            background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.9);
            border-radius: 14px; padding: .7rem .9rem;
            box-shadow: 0 12px 30px rgba(17,12,46,.07); transition: var(--transition);
            position: relative; overflow: hidden; backdrop-filter: blur(6px);
        }
body.page-learning-path .lp-card::before {
            content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 5px;
            background: var(--tc, var(--c3));
        }
body.page-learning-path .lp-card::after {
            content: ''; position: absolute; inset: 0; opacity: 0; transition: var(--transition);
            background: linear-gradient(90deg, var(--tc, var(--c3)), transparent 60%);
            mix-blend-mode: multiply; pointer-events: none; filter: opacity(.06);
        }
body.page-learning-path .lp-card:hover { transform: translateX(-7px); box-shadow: 0 26px 50px rgba(17,12,46,.16), 0 12px 30px color-mix(in srgb, var(--tc, #7209b7) 18%, transparent); border-color: var(--tc, rgba(114,9,183,.2)); }
body.page-learning-path .lp-card:hover::after { opacity: 1; }
body.page-learning-path .lp-thumb {
            width: 66px; height: 66px; flex-shrink: 0; border-radius: 12px; overflow: hidden;
            background: var(--gray-light); box-shadow: 0 6px 16px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.6); position: relative;
        }
body.page-learning-path .lp-thumb::after { content: ''; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc, #7209b7) 28%, transparent); opacity: 0; transition: var(--transition); }
body.page-learning-path .lp-card:hover .lp-thumb::after { opacity: 1; }
body.page-learning-path .lp-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
body.page-learning-path .lp-card:hover .lp-thumb img { transform: scale(1.1); }
body.page-learning-path .lp-card-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
body.page-learning-path .lp-badge {
            display: inline-block; font-size: .7rem; font-weight: 800; padding: .2rem .7rem;
            border-radius: 999px; margin-bottom: .4rem; color: #fff;
            box-shadow: 0 4px 10px rgba(0,0,0,.12);
        }
body.page-learning-path .lp-card-body h3 {
            font-size: .85rem; font-weight: 800; margin-bottom: .25rem; line-height: 1.5;
            transition: var(--transition);
        }
body.page-learning-path .lp-card:hover .lp-card-body h3 { color: var(--tc, var(--c3)); }
body.page-learning-path .lp-card-body p {
            font-size: .78rem; color: var(--muted); display: -webkit-box;
            -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
body.page-learning-path .lp-meta { display: flex; gap: 1rem; margin-top: .5rem; font-size: .74rem; color: var(--muted); }
body.page-learning-path .lp-meta span { display: inline-flex; align-items: center; gap: .3rem; }
body.page-learning-path .lp-meta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
body.page-learning-path .lp-go {
            flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
            display: grid; place-items: center; color: #fff; transition: var(--transition);
            position: relative; z-index: 1; box-shadow: 0 8px 18px rgba(0,0,0,.18);
        }
body.page-learning-path .lp-go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
body.page-learning-path .lp-card:hover .lp-go { transform: scale(1.14) translateX(-2px); }
body.page-learning-path .lp-empty {
            text-align: center; padding: 3rem 1rem; color: var(--muted);
            background: var(--gray-light); border-radius: var(--radius);
        }
body.page-learning-path /* ===== CTA ===== */
        .lp-cta {
            margin: 1rem auto 4rem; max-width: 940px;
            background: linear-gradient(135deg, var(--c3), var(--c8) 55%, var(--c9));
            border-radius: var(--radius); padding: 3.2rem 2rem; text-align: center; color: #fff;
            position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
        }
body.page-learning-path .lp-cta::before {
            content: ''; position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
            background-size: 24px 24px; opacity: .5;
        }
body.page-learning-path .lp-cta::after {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(520px 260px at 85% 10%, rgba(255,255,255,.2), transparent 60%);
        }
body.page-learning-path .lp-cta h2 { position: relative; z-index: 1; font-size: clamp(1.5rem,3.5vw,2.15rem); font-weight: 900; margin-bottom: .7rem; }
body.page-learning-path .lp-cta p { position: relative; z-index: 1; opacity: .95; max-width: 560px; margin: 0 auto 1.9rem; }
body.page-learning-path .lp-cta .btns { position: relative; z-index: 1; display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
body.page-learning-path .lp-btn {
            display: inline-flex; align-items: center; gap: .5rem;
            padding: .9rem 1.8rem; border-radius: 999px; font-weight: 800; font-size: 1rem;
            transition: var(--transition);
        }
body.page-learning-path .lp-btn.solid { background: var(--white); color: var(--c3); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
body.page-learning-path .lp-btn.solid:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.28); }
body.page-learning-path .lp-btn.ghost { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
body.page-learning-path .lp-btn.ghost:hover { background: rgba(255,255,255,.24); transform: translateY(-3px); }
@media (max-width: 640px) {
body.page-learning-path .lp-hero { padding: 3.4rem 0 2.6rem; }
body.page-learning-path .lp-card { flex-wrap: nowrap; gap: .65rem; padding: .55rem .7rem; }
body.page-learning-path .lp-thumb { width: 48px; height: 48px; }
body.page-learning-path .lp-go { width: 32px; height: 32px; }
body.page-learning-path .lp-go svg { width: 15px; height: 15px; }
body.page-learning-path .lp-card-body p { display: none; }
body.page-learning-path .lp-step { padding-left: 0; padding-right: 4.6rem; }
body.page-learning-path .lp-step::after { right: 48px; width: 22px; }
body.page-learning-path .lp-timeline::before { right: 24px; }
body.page-learning-path .lp-timeline::after { right: 21px; }
body.page-learning-path .lp-node { right: 5px; width: 40px; height: 40px; font-size: .95rem; }
body.page-learning-path .lp-track-head { flex-wrap: wrap; gap: 1rem; padding: 1.3rem 1.3rem; }
body.page-learning-path .lp-track-head .th-chip { order: 3; }
body.page-learning-path .lp-track-head h2 { font-size: .98rem; }
body.page-learning-path .lp-card-body h3 { font-size: .58rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0; }
}

/* --- view_instructor.php @ body.page-view-instructor --- */
body.page-view-instructor {
            --c1: #f72585; --c2: #b5179e; --c3: #7209b7; --c4: #560bad; --c5: #480ca8;
            --c6: #3a0ca3; --c7: #3f37c9; --c8: #4361ee; --c9: #4895ef; --c10: #4cc9f0;
            --white: #ffffff; --black: #000000; --gray-light: #f8f9fa; --gray-dark: #212529;
            --primary: var(--c3); --accent: var(--c1); --bg: var(--white); --text: var(--gray-dark);
            --shadow: 0 12px 32px rgba(114,9,183,.15); --transition: all .4s cubic-bezier(.2,.8,.2,1);
            --radius: 1.8rem; --radius-sm: 1.2rem;
        }
body.page-view-instructor > *, body.page-view-instructor * { box-sizing: border-box; margin: 0; padding: 0; }
body.page-view-instructor { scroll-behavior: smooth; }
body.page-view-instructor, body.page-view-instructor { 
            font-family: 'Vazirmatn', sans-serif; 
            background: linear-gradient(135deg, #fdf4ff 0%, #f0e8ff 35%, #e0f2fe 70%, #e0f7fa 100%);
            color: var(--text); 
            line-height: 1.75; 
            overflow-x: hidden; 
            min-height: 100vh;
        }
body.page-view-instructor .container { max-width: 1200px; margin: 0 auto; padding: 0 1.2rem; }
body.page-view-instructor /* Header */
        .page-header {
            background: linear-gradient(135deg, var(--c1), var(--c3), var(--c8));
            padding: 1.2rem 0;
            margin-bottom: 2rem;
            box-shadow: 0 8px 32px rgba(114,9,183,.2);
            position: relative;
            overflow: hidden;
        }
body.page-view-instructor .page-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%);
            animation: page-view-instructor-rotate 20s linear infinite;
        }
@keyframes page-view-instructor-rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
body.page-view-instructor .header-content {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1.5rem;
        }
body.page-view-instructor .btn-back {
            padding: .5rem 1.1rem;
            border-radius: 9999px;
            font-weight: 700;
            font-size: .82rem;
            background: rgba(255,255,255,.2);
            color: white;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            transition: var(--transition);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255,255,255,.3);
        }
body.page-view-instructor .btn-back:hover {
            background: rgba(255,255,255,.3);
            transform: translateX(-5px);
        }
body.page-view-instructor /* Main Content */
        .resume-container {
            background: var(--white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-bottom: 2rem;
            animation: page-view-instructor-fadeInUp 0.6s ease;
        }
@keyframes page-view-instructor-fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
body.page-view-instructor /* Hero Section */
        .resume-hero {
            background: linear-gradient(135deg, rgba(247,37,133,.1), rgba(67,97,238,.1));
            padding: 2rem 2rem;
            display: flex;
            align-items: center;
            gap: 2rem;
            flex-wrap: wrap;
            position: relative;
        }
body.page-view-instructor .resume-hero::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--c1), var(--c3), var(--c8), transparent);
        }
body.page-view-instructor .instructor-avatar {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid white;
            box-shadow: 0 8px 28px rgba(114,9,183,.25);
            transition: var(--transition);
        }
body.page-view-instructor .instructor-avatar:hover {
            transform: scale(1.05);
            box-shadow: 0 16px 50px rgba(114,9,183,.35);
        }
body.page-view-instructor .hero-info {
            flex: 1;
            min-width: 250px;
        }
body.page-view-instructor .hero-info h1 {
            font-size: 1.6rem;
            font-weight: 800;
            margin-bottom: .3rem;
            background: linear-gradient(90deg, var(--c1), var(--c3), var(--c8));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
body.page-view-instructor .hero-info .title {
            font-size: 1rem;
            color: var(--c3);
            font-weight: 700;
            margin-bottom: .7rem;
        }
body.page-view-instructor .hero-info .category {
            display: inline-block;
            padding: .3rem .8rem;
            border-radius: 9999px;
            background: linear-gradient(135deg, var(--c1), var(--c3));
            color: white;
            font-size: .78rem;
            font-weight: 600;
        }
body.page-view-instructor /* Bio Section */
        .bio-section {
            padding: 1.8rem 2rem;
        }
body.page-view-instructor .section-title {
            font-size: 1.2rem;
            font-weight: 800;
            margin-bottom: 1rem;
            color: var(--c3);
            display: flex;
            align-items: center;
            gap: .6rem;
            padding-bottom: .7rem;
            border-bottom: 3px solid;
            border-image: linear-gradient(90deg, var(--c1), var(--c3), var(--c8)) 1;
        }
body.page-view-instructor .section-title i {
            color: var(--c1);
        }
body.page-view-instructor .bio-content {
            font-size: 0.9rem;
            line-height: 1.9;
            color: #444;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
body.page-view-instructor /* Courses Grid */
        .courses-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-top: 1.5rem;
        }
body.page-view-instructor .course-card {
            background: var(--white);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,.08);
            transition: all 0.3s ease;

            display: flex;
            flex-direction: column;
            height: 100%;
        }
body.page-view-instructor .course-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,.12);
        }
body.page-view-instructor .course-card img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
body.page-view-instructor .course-card h3 {
            font-size: 0.95rem;
            margin: 0.8rem 1.2rem 0.4rem;
            color: var(--c3);
        }
body.page-view-instructor .course-card p {
            font-size: 0.82rem;
            color: #666;
            margin: 0 1.2rem;
            line-height: 1.6;
        }
body.page-view-instructor .course-meta {
            display: flex;
            gap: 1.2rem;
            margin: 0.8rem 1.2rem;
            font-size: 0.78rem;
            color: #888;
        }
body.page-view-instructor .course-meta span {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
body.page-view-instructor .course-meta i {
            color: var(--c1);
        }
body.page-view-instructor .btn-view {
            display: block;
            text-align: center;
            background: linear-gradient(135deg, var(--c1), var(--c3));
            color: white;
            padding: 0.6rem;
            margin-top: auto;
            margin-right: 0.8rem;
            margin-bottom: 0.8rem;
            margin-left: 0.8rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.85rem;
            transition: all 0.3s ease;
        }
body.page-view-instructor .btn-view:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 15px rgba(0,0,0,.15);
        }
body.page-view-instructor /* Contact Info */
        .contact-info {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 2px solid var(--gray-light);
        }
body.page-view-instructor .contact-item {
            display: flex;
            align-items: center;
            gap: .6rem;
            color: #666;
            font-size: 0.85rem;
        }
body.page-view-instructor .contact-item i {
            color: var(--c3);
            font-size: 1.1rem;
        }
body.page-view-instructor /* Footer */
        .page-footer {
            text-align: center;
            padding: 1.2rem;
            color: #666;
            font-size: 0.82rem;
        }
/* Responsive */
        @media (max-width: 768px) {
            body.page-view-instructor .resume-hero {
                flex-direction: column;
                text-align: center;
                padding: 1.5rem 1.2rem;
            }
            
            body.page-view-instructor .instructor-avatar {
                width: 110px;
                height: 110px;
            }
            
            body.page-view-instructor .hero-info h1 {
                font-size: 1.3rem;
            }
            
            body.page-view-instructor .bio-section {
                padding: 1.2rem;
            }
            
            body.page-view-instructor .section-title {
                font-size: 1.05rem;
            }
            
            body.page-view-instructor .bio-content {
                font-size: 0.85rem;
            }
        }
body.page-view-instructor /* ===== Force compact overrides ===== */
        .page-header { padding: 1.2rem 0 !important; margin-bottom: 2rem !important; margin-top: 0 !important; }
body.page-view-instructor .btn-back { padding: .5rem 1.1rem !important; font-size: .82rem !important; }
body.page-view-instructor .resume-hero { padding: 2rem !important; gap: 2rem !important; }
body.page-view-instructor .instructor-avatar { width: 130px !important; height: 130px !important; border-width: 4px !important; }
body.page-view-instructor .hero-info h1 { font-size: 1.6rem !important; margin-bottom: .3rem !important; }
body.page-view-instructor .hero-info .title { font-size: 1rem !important; margin-bottom: .7rem !important; }
body.page-view-instructor .hero-info .category { font-size: .78rem !important; padding: .3rem .8rem !important; }
body.page-view-instructor .bio-section { padding: 1.8rem 2rem !important; }
body.page-view-instructor .resume-container .section-title { font-size: 1.2rem !important; margin-bottom: 1rem !important; gap: .6rem !important; padding-bottom: .7rem !important; }
body.page-view-instructor .bio-content { font-size: 0.9rem !important; line-height: 1.9 !important; }
body.page-view-instructor .courses-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; margin-top: 1.5rem !important; }
body.page-view-instructor .course-card { border-radius: 12px !important; }
body.page-view-instructor .course-card img { height: 120px !important; }
body.page-view-instructor .course-card h3 { font-size: 0.85rem !important; margin: 0.6rem 0.8rem 0.3rem !important; }
body.page-view-instructor .course-card p { font-size: 0.75rem !important; margin: 0 0.8rem !important; line-height: 1.5 !important; }
body.page-view-instructor .course-meta { font-size: 0.72rem !important; margin: 0.5rem 0.8rem !important; gap: 0.8rem !important; }
body.page-view-instructor .btn-view { padding: 0.45rem !important; margin: 0.5rem 0.8rem 0.8rem !important; font-size: 0.78rem !important; margin-top: auto !important; }
body.page-view-instructor .contact-info { gap: 1.5rem !important; margin-top: 1.5rem !important; padding-top: 1.5rem !important; }
body.page-view-instructor .contact-item { font-size: 0.85rem !important; gap: .6rem !important; }
body.page-view-instructor .contact-item i { font-size: 1.1rem !important; }
body.page-view-instructor .page-footer { padding: 1.2rem !important; font-size: 0.82rem !important; }
@media (max-width: 992px) {
body.page-view-instructor .courses-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
body.page-view-instructor .resume-hero { padding: 1.5rem 1.2rem !important; }
body.page-view-instructor .instructor-avatar { width: 110px !important; height: 110px !important; }
body.page-view-instructor .hero-info h1 { font-size: 1.3rem !important; }
body.page-view-instructor .bio-section { padding: 1.2rem !important; }
body.page-view-instructor .resume-container .section-title { font-size: 1.05rem !important; }
body.page-view-instructor .bio-content { font-size: 0.85rem !important; }
body.page-view-instructor .courses-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
body.page-view-instructor .courses-grid { grid-template-columns: 1fr !important; }
}

/* --- terms.php @ body.page-terms --- */
body.page-terms .policy-page {
    max-width: 100%;
    margin: 2rem auto;
    padding: 0 1.5rem 4rem;
    font-family: 'Vazirmatn', sans-serif;
}
body.page-terms .policy-hero {
    padding: 2rem 0 1rem;
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid rgba(114,9,183,.15);
}
body.page-terms .policy-hero h1 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    color: var(--c3, #7209b7);
}
body.page-terms .policy-card {
    background: var(--white);
    border: 1px solid rgba(114,9,183,.08);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 1.2rem;
    transition: box-shadow .3s ease;
}
body.page-terms .policy-card:hover {
    box-shadow: 0 8px 24px rgba(114,9,183,.08);
}
body.page-terms .policy-card h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c3, #7209b7);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
body.page-terms .policy-card h2 i {
    font-size: 1rem;
    color: var(--c8, #4361ee);
}
body.page-terms .policy-card p, body.page-terms .policy-card li {
    font-size: .9rem;
    line-height: 2;
    color: #475569;
}
body.page-terms .policy-card ul, body.page-terms .policy-card ol {
    padding-right: 1.2rem;
    margin: .5rem 0;
}
body.page-terms .policy-card ul li, body.page-terms .policy-card ol li {
    margin-bottom: .3rem;
}
body.page-terms .policy-updated {
    text-align: center;
    font-size: .8rem;
    color: #94a3b8;
    margin-top: 1.5rem;
}
@media (max-width: 768px) {
body.page-terms .policy-card { padding: 1.5rem 1.2rem; }
}

/* --- privacy.php @ body.page-privacy --- */
body.page-privacy .policy-page {
    max-width: 100%;
    margin: 2rem auto;
    padding: 0 1.5rem 4rem;
    font-family: 'Vazirmatn', sans-serif;
}
body.page-privacy .policy-hero {
    padding: 2rem 0 1rem;
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid rgba(114,9,183,.15);
}
body.page-privacy .policy-hero h1 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    color: var(--c3, #7209b7);
}
body.page-privacy .policy-card {
    background: var(--white);
    border: 1px solid rgba(114,9,183,.08);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 1.2rem;
    transition: box-shadow .3s ease;
}
body.page-privacy .policy-card:hover {
    box-shadow: 0 8px 24px rgba(114,9,183,.08);
}
body.page-privacy .policy-card h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c3, #7209b7);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
body.page-privacy .policy-card h2 i {
    font-size: 1rem;
    color: var(--c8, #4361ee);
}
body.page-privacy .policy-card p, body.page-privacy .policy-card li {
    font-size: .9rem;
    line-height: 2;
    color: #475569;
}
body.page-privacy .policy-card ul {
    padding-right: 1.2rem;
    margin: .5rem 0;
}
body.page-privacy .policy-card ul li {
    margin-bottom: .3rem;
}
body.page-privacy .policy-updated {
    text-align: center;
    font-size: .8rem;
    color: #94a3b8;
    margin-top: 1.5rem;
}
@media (max-width: 768px) {
body.page-privacy .policy-card { padding: 1.5rem 1.2rem; }
}

/* --- enroll.php @ body.page-enroll --- */
body.page-enroll /* Premium 2026 Enrollment Page Styles */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
body.page-enroll {
        font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        background: linear-gradient(135deg, var(--gray-light) 0%, var(--gray-light) 100%);
        min-height: 100vh;
    }
body.page-enroll .enrollment-hero {
        background: linear-gradient(135deg, 
            rgba(247, 37, 133, 0.05) 0%, 
            rgba(114, 9, 183, 0.08) 50%, 
            rgba(67, 97, 238, 0.05) 100%
        );
        padding: 3rem 0 6rem;
        position: relative;
        overflow: hidden;
    }
body.page-enroll .enrollment-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(247, 37, 133, 0.1), transparent 70%);
        border-radius: 50%;
        animation: page-enroll-float 20s infinite ease-in-out;
    }
@keyframes page-enroll-float {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50% { transform: translate(30px, 30px) scale(1.1); }
    }
body.page-enroll .enrollment-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        position: relative;
        z-index: 2;
    }
body.page-enroll .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        color: white;
        padding: 0.6rem 1.5rem;
        border-radius: 50px;
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        box-shadow: 0 8px 25px rgba(247, 37, 133, 0.3);
        animation: page-enroll-pulse-glow 2s ease-in-out infinite;
    }
@keyframes page-enroll-pulse-glow {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
body.page-enroll .hero-title {
        font-size: 3rem;
        font-weight: 900;
        line-height: 1.2;
        margin-bottom: 1rem;
        background: linear-gradient(135deg, var(--c3), var(--c8));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
body.page-enroll .hero-subtitle {
        font-size: 1.3rem;
        color: #6b7280;
        font-weight: 500;
        margin-bottom: 2rem;
    }
body.page-enroll .enrollment-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 3rem;
        margin-top: -4rem;
        position: relative;
        z-index: 3;
    }
body.page-enroll .enrollment-main-card {
        background: var(--white);
        border-radius: 28px;
        box-shadow: 0 25px 70px rgba(114, 9, 183, 0.12);
        padding: 3rem;
        border: 1px solid rgba(114, 9, 183, 0.08);
    }
body.page-enroll .course-summary {
        display: flex;
        gap: 1.5rem;
        padding-bottom: 2rem;
        border-bottom: 2px solid rgba(114, 9, 183, 0.1);
        margin-bottom: 2rem;
    }
body.page-enroll .course-thumbnail {
        flex-shrink: 0;
        width: 140px;
        height: 140px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
body.page-enroll .course-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
body.page-enroll .course-info h2 {
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--text);
        margin-bottom: 0.8rem;
        line-height: 1.3;
    }
body.page-enroll .course-short-desc {
        font-size: 1.05rem;
        color: #6b7280;
        line-height: 1.7;
    }
body.page-enroll /* Premium Price Display */
    .price-display-premium {
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.05), rgba(114, 9, 183, 0.08));
        border-radius: 24px;
        padding: 2.5rem;
        text-align: center;
        margin-bottom: 2.5rem;
        position: relative;
        overflow: hidden;
    }
body.page-enroll .price-display-premium::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--c1), var(--c3), var(--c8));
    }
body.page-enroll .discount-ribbon {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        padding: 0.8rem 1.8rem;
        border-radius: 50px;
        font-size: 1.1rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
        animation: page-enroll-wiggle 2s ease-in-out infinite;
    }
@keyframes page-enroll-wiggle {
        0%, 100% { transform: rotate(-2deg); }
        50% { transform: rotate(2deg); }
    }
body.page-enroll .discount-ribbon i {
        font-size: 1.4rem;
    }
body.page-enroll .original-price-large {
        font-size: 1.6rem;
        color: #9ca3af;
        text-decoration: line-through;
        font-weight: 600;
        margin-bottom: 1rem;
    }
body.page-enroll .final-price-large {
        font-size: 4rem;
        font-weight: 900;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        line-height: 1;
        margin-bottom: 1rem;
    }
body.page-enroll .final-price-large .currency {
        font-size: 1.8rem;
    }
body.page-enroll .savings-display {
        font-size: 1.15rem;
        color: #10b981;
        font-weight: 700;
        padding: 0.8rem 1.5rem;
        background: rgba(16, 185, 129, 0.12);
        border-radius: 50px;
        display: inline-block;
    }
body.page-enroll .instant-access-box {
        background: linear-gradient(135deg, rgba(67, 97, 238, 0.08), rgba(76, 201, 240, 0.08));
        border-radius: 20px;
        padding: 2rem;
        margin-bottom: 2.5rem;
        border-right: 4px solid var(--c8);
    }
body.page-enroll .instant-access-box h3 {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--c8);
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }
body.page-enroll .instant-access-box h3 i {
        font-size: 1.5rem;
    }
body.page-enroll .instant-access-box p {
        font-size: 1.05rem;
        color: #4b5563;
        line-height: 1.7;
    }
body.page-enroll /* Emotional CTA Section */
    .emotional-cta {
        background: linear-gradient(135deg, var(--c1), var(--c3), var(--c8));
        color: white;
        border-radius: 24px;
        padding: 3rem;
        text-align: center;
        margin-bottom: 2.5rem;
        box-shadow: 0 20px 60px rgba(247, 37, 133, 0.3);
        position: relative;
        overflow: hidden;
    }
body.page-enroll .emotional-cta::before {
        content: '🌟';
        position: absolute;
        font-size: 8rem;
        top: -2rem;
        right: -2rem;
        opacity: 0.1;
    }
body.page-enroll .emotional-cta::after {
        content: '❤️';
        position: absolute;
        font-size: 6rem;
        bottom: -1rem;
        left: -1rem;
        opacity: 0.1;
    }
body.page-enroll .emotional-cta h2 {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        line-height: 1.4;
        position: relative;
        z-index: 2;
    }
body.page-enroll .emotional-cta p {
        font-size: 1.15rem;
        line-height: 1.9;
        margin-bottom: 0.8rem;
        opacity: 0.95;
        position: relative;
        z-index: 2;
    }
body.page-enroll .hero-phone-section {
        background: var(--white);
        border-radius: 20px;
        padding: 2.5rem;
        margin-top: 2rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    }
body.page-enroll .hero-phone-section h3 {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--text);
        margin-bottom: 1.5rem;
        text-align: center;
    }
body.page-enroll .phone-display {
        text-align: center;
        margin: 2rem 0;
    }
body.page-enroll .phone-number-huge {
        display: inline-block;
        font-size: 3.5rem;
        font-weight: 900;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-decoration: none;
        padding: 1rem 2rem;
        border-radius: 20px;
        transition: all 0.3s ease;
        direction: ltr;
        animation: page-enroll-pulse-phone 2s ease-in-out infinite;
    }
@keyframes page-enroll-pulse-phone {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
body.page-enroll .phone-number-huge:hover {
        transform: translateY(-3px);
        filter: drop-shadow(0 10px 25px rgba(247, 37, 133, 0.3));
    }
body.page-enroll .whatsapp-btn-large {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        background: linear-gradient(135deg, #25d366, #128c7e);
        color: white;
        padding: 1.3rem 3rem;
        border-radius: 20px;
        font-size: 1.4rem;
        font-weight: 800;
        text-decoration: none;
        box-shadow: 0 15px 45px rgba(37, 211, 102, 0.4);
        transition: all 0.3s ease;
        margin-top: 1.5rem;
    }
body.page-enroll .whatsapp-btn-large:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 55px rgba(37, 211, 102, 0.5);
    }
body.page-enroll .whatsapp-btn-large i {
        font-size: 2rem;
    }
body.page-enroll /* Callback Request Form */
    .callback-request-section {
        background: var(--white);
        border-radius: 28px;
        padding: 3rem;
        box-shadow: 0 25px 70px rgba(114, 9, 183, 0.12);
        margin-top: 2rem;
        border: 2px solid rgba(114, 9, 183, 0.1);
    }
body.page-enroll .callback-request-section h2 {
        font-size: 2rem;
        font-weight: 800;
        color: var(--c3);
        margin-bottom: 1rem;
        text-align: center;
    }
body.page-enroll .callback-request-section .subtitle {
        font-size: 1.1rem;
        color: #6b7280;
        text-align: center;
        margin-bottom: 2.5rem;
        line-height: 1.6;
    }
body.page-enroll .callback-form {
        max-width: 600px;
        margin: 0 auto;
    }
body.page-enroll .form-group-premium {
        margin-bottom: 1.8rem;
    }
body.page-enroll .form-group-premium label {
        display: block;
        font-size: 1rem;
        font-weight: 700;
        color: #374151;
        margin-bottom: 0.6rem;
    }
body.page-enroll .form-group-premium label .required {
        color: #ef4444;
        margin-right: 0.3rem;
    }
body.page-enroll .form-input-premium {
        width: 100%;
        padding: 1.2rem 1.5rem;
        font-size: 1.1rem;
        border: 2px solid #e5e7eb;
        border-radius: 16px;
        transition: all 0.3s ease;
        font-family: 'Vazirmatn', sans-serif;
        background: var(--gray-light);
    }
body.page-enroll .form-input-premium:focus {
        outline: none;
        border-color: var(--c3);
        background: var(--white);
        box-shadow: 0 8px 25px rgba(114, 9, 183, 0.1);
        transform: translateY(-2px);
    }
body.page-enroll .form-input-premium::placeholder {
        color: #9ca3af;
    }
body.page-enroll .input-icon {
        position: relative;
    }
body.page-enroll .input-icon i {
        position: absolute;
        left: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.3rem;
        color: var(--c3);
        pointer-events: none;
    }
body.page-enroll .input-icon .form-input-premium {
        padding-left: 3.5rem;
    }
body.page-enroll .btn-submit-callback {
        width: 100%;
        padding: 1.5rem;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        color: white;
        border: none;
        border-radius: 18px;
        font-size: 1.3rem;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 15px 45px rgba(247, 37, 133, 0.4);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
    }
body.page-enroll .btn-submit-callback:hover:not(:disabled) {
        transform: translateY(-3px);
        box-shadow: 0 20px 55px rgba(247, 37, 133, 0.5);
    }
body.page-enroll .btn-submit-callback:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
body.page-enroll .btn-submit-callback i {
        font-size: 1.5rem;
    }
body.page-enroll .loading-spinner {
        display: none;
        width: 24px;
        height: 24px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: page-enroll-spin 0.8s linear infinite;
    }
@keyframes page-enroll-spin {
        to { transform: rotate(360deg); }
    }
body.page-enroll .btn-submit-callback.loading .loading-spinner {
        display: inline-block;
    }
body.page-enroll .btn-submit-callback.loading .btn-text {
        display: none;
    }
body.page-enroll .success-message {
        display: none;
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        padding: 1.5rem;
        border-radius: 16px;
        text-align: center;
        font-size: 1.1rem;
        font-weight: 700;
        margin-top: 1.5rem;
        animation: page-enroll-slideIn 0.5s ease;
    }
body.page-enroll .success-message.show {
        display: block;
    }
body.page-enroll .error-message {
        display: none;
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
        padding: 1.5rem;
        border-radius: 16px;
        text-align: center;
        font-size: 1rem;
        font-weight: 600;
        margin-top: 1rem;
    }
body.page-enroll .error-message.show {
        display: block;
    }
@keyframes page-enroll-slideIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
body.page-enroll /* Sidebar Info Card */
    .sidebar-info-card {
        background: var(--white);
        border-radius: 24px;
        padding: 2.5rem;
        box-shadow: 0 20px 60px rgba(114, 9, 183, 0.12);
        position: sticky;
        top: 120px;
    }
body.page-enroll .sidebar-info-card h3 {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--c3);
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }
body.page-enroll .info-list {
        list-style: none;
    }
body.page-enroll .info-list li {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 0;
        font-size: 1rem;
        color: #4b5563;
        border-bottom: 1px solid rgba(114, 9, 183, 0.08);
    }
body.page-enroll .info-list li:last-child {
        border-bottom: none;
    }
body.page-enroll .info-icon {
        flex-shrink: 0;
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.1), rgba(114, 9, 183, 0.1));
        border-radius: 14px;
    }
body.page-enroll .info-icon i {
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 1.3rem;
    }
body.page-enroll .trust-badges {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 2px solid rgba(114, 9, 183, 0.1);
    }
body.page-enroll .trust-badge {
        text-align: center;
        padding: 1rem;
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.05), rgba(114, 9, 183, 0.05));
        border-radius: 16px;
    }
body.page-enroll .trust-badge i {
        font-size: 2rem;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 0.5rem;
    }
body.page-enroll .trust-badge .label {
        font-size: 0.85rem;
        color: #6b7280;
        font-weight: 600;
    }
/* Responsive Design */
    @media (max-width: 1024px) {
        body.page-enroll .enrollment-grid {
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        body.page-enroll .sidebar-info-card {
            position: static;
        }
    }
@media (max-width: 768px) {
body.page-enroll .hero-title {
            font-size: 2rem;
        }
body.page-enroll .hero-subtitle {
            font-size: 1.1rem;
        }
body.page-enroll .enrollment-main-card, body.page-enroll .callback-request-section {
            padding: 2rem;
        }
body.page-enroll .course-summary {
            flex-direction: column;
        }
body.page-enroll .course-thumbnail {
            width: 100%;
            height: 200px;
        }
body.page-enroll .final-price-large {
            font-size: 3rem;
        }
body.page-enroll .phone-number-huge {
            font-size: 2.5rem;
        }
body.page-enroll .trust-badges {
            grid-template-columns: 1fr;
        }
}

/* --- enroll_premium.php @ body.page-enroll-premium --- */
body.page-enroll-premium /* Premium 2026 Enrollment Page Styles */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
body.page-enroll-premium {
        font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        background: linear-gradient(135deg, var(--gray-light) 0%, var(--gray-light) 100%);
        min-height: 100vh;
    }
body.page-enroll-premium .enrollment-hero {
        background: linear-gradient(135deg, 
            rgba(247, 37, 133, 0.05) 0%, 
            rgba(114, 9, 183, 0.08) 50%, 
            rgba(67, 97, 238, 0.05) 100%
        );
        padding: 3rem 0 6rem;
        position: relative;
        overflow: hidden;
    }
body.page-enroll-premium .enrollment-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(247, 37, 133, 0.1), transparent 70%);
        border-radius: 50%;
        animation: page-enroll-premium-float 20s infinite ease-in-out;
    }
@keyframes page-enroll-premium-float {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50% { transform: translate(30px, 30px) scale(1.1); }
    }
body.page-enroll-premium .enrollment-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        position: relative;
        z-index: 2;
    }
body.page-enroll-premium .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        color: white;
        padding: 0.6rem 1.5rem;
        border-radius: 50px;
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        box-shadow: 0 8px 25px rgba(247, 37, 133, 0.3);
        animation: page-enroll-premium-pulse-glow 2s ease-in-out infinite;
    }
@keyframes page-enroll-premium-pulse-glow {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
body.page-enroll-premium .hero-title {
        font-size: 3rem;
        font-weight: 900;
        line-height: 1.2;
        margin-bottom: 1rem;
        background: linear-gradient(135deg, var(--c3), var(--c8));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
body.page-enroll-premium .hero-subtitle {
        font-size: 1.3rem;
        color: #6b7280;
        font-weight: 500;
        margin-bottom: 2rem;
    }
body.page-enroll-premium .enrollment-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 3rem;
        margin-top: -4rem;
        position: relative;
        z-index: 3;
    }
body.page-enroll-premium .enrollment-main-card {
        background: var(--white);
        border-radius: 28px;
        box-shadow: 0 25px 70px rgba(114, 9, 183, 0.12);
        padding: 3rem;
        border: 1px solid rgba(114, 9, 183, 0.08);
    }
body.page-enroll-premium .course-summary {
        display: flex;
        gap: 1.5rem;
        padding-bottom: 2rem;
        border-bottom: 2px solid rgba(114, 9, 183, 0.1);
        margin-bottom: 2rem;
    }
body.page-enroll-premium .course-thumbnail {
        flex-shrink: 0;
        width: 140px;
        height: 140px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
body.page-enroll-premium .course-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
body.page-enroll-premium .course-info h2 {
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--text);
        margin-bottom: 0.8rem;
        line-height: 1.3;
    }
body.page-enroll-premium .course-short-desc {
        font-size: 1.05rem;
        color: #6b7280;
        line-height: 1.7;
    }
body.page-enroll-premium /* Premium Price Display */
    .price-display-premium {
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.05), rgba(114, 9, 183, 0.08));
        border-radius: 24px;
        padding: 2.5rem;
        text-align: center;
        margin-bottom: 2.5rem;
        position: relative;
        overflow: hidden;
    }
body.page-enroll-premium .price-display-premium::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--c1), var(--c3), var(--c8));
    }
body.page-enroll-premium .discount-ribbon {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        padding: 0.8rem 1.8rem;
        border-radius: 50px;
        font-size: 1.1rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
        animation: page-enroll-premium-wiggle 2s ease-in-out infinite;
    }
@keyframes page-enroll-premium-wiggle {
        0%, 100% { transform: rotate(-2deg); }
        50% { transform: rotate(2deg); }
    }
body.page-enroll-premium .discount-ribbon i {
        font-size: 1.4rem;
    }
body.page-enroll-premium .original-price-large {
        font-size: 1.6rem;
        color: #9ca3af;
        text-decoration: line-through;
        font-weight: 600;
        margin-bottom: 1rem;
    }
body.page-enroll-premium .final-price-large {
        font-size: 4rem;
        font-weight: 900;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        line-height: 1;
        margin-bottom: 1rem;
    }
body.page-enroll-premium .final-price-large .currency {
        font-size: 1.8rem;
    }
body.page-enroll-premium .savings-display {
        font-size: 1.15rem;
        color: #10b981;
        font-weight: 700;
        padding: 0.8rem 1.5rem;
        background: rgba(16, 185, 129, 0.12);
        border-radius: 50px;
        display: inline-block;
    }
body.page-enroll-premium .instant-access-box {
        background: linear-gradient(135deg, rgba(67, 97, 238, 0.08), rgba(76, 201, 240, 0.08));
        border-radius: 20px;
        padding: 2rem;
        margin-bottom: 2.5rem;
        border-right: 4px solid var(--c8);
    }
body.page-enroll-premium .instant-access-box h3 {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--c8);
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }
body.page-enroll-premium .instant-access-box h3 i {
        font-size: 1.5rem;
    }
body.page-enroll-premium .instant-access-box p {
        font-size: 1.05rem;
        color: #4b5563;
        line-height: 1.7;
    }
body.page-enroll-premium /* Emotional CTA Section */
    .emotional-cta {
        background: linear-gradient(135deg, var(--c1), var(--c3), var(--c8));
        color: white;
        border-radius: 24px;
        padding: 3rem;
        text-align: center;
        margin-bottom: 2.5rem;
        box-shadow: 0 20px 60px rgba(247, 37, 133, 0.3);
        position: relative;
        overflow: hidden;
    }
body.page-enroll-premium .emotional-cta::before {
        content: '🌟';
        position: absolute;
        font-size: 8rem;
        top: -2rem;
        right: -2rem;
        opacity: 0.1;
    }
body.page-enroll-premium .emotional-cta::after {
        content: '❤️';
        position: absolute;
        font-size: 6rem;
        bottom: -1rem;
        left: -1rem;
        opacity: 0.1;
    }
body.page-enroll-premium .emotional-cta h2 {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        line-height: 1.4;
        position: relative;
        z-index: 2;
    }
body.page-enroll-premium .emotional-cta p {
        font-size: 1.15rem;
        line-height: 1.9;
        margin-bottom: 0.8rem;
        opacity: 0.95;
        position: relative;
        z-index: 2;
    }
body.page-enroll-premium .hero-phone-section {
        background: var(--white);
        border-radius: 20px;
        padding: 2.5rem;
        margin-top: 2rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    }
body.page-enroll-premium .hero-phone-section h3 {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--text);
        margin-bottom: 1.5rem;
        text-align: center;
    }
body.page-enroll-premium .phone-display {
        text-align: center;
        margin: 2rem 0;
    }
body.page-enroll-premium .phone-number-huge {
        display: inline-block;
        font-size: 3.5rem;
        font-weight: 900;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-decoration: none;
        padding: 1rem 2rem;
        border-radius: 20px;
        transition: all 0.3s ease;
        direction: ltr;
        animation: page-enroll-premium-pulse-phone 2s ease-in-out infinite;
    }
@keyframes page-enroll-premium-pulse-phone {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
body.page-enroll-premium .phone-number-huge:hover {
        transform: translateY(-3px);
        filter: drop-shadow(0 10px 25px rgba(247, 37, 133, 0.3));
    }
body.page-enroll-premium .whatsapp-btn-large {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        background: linear-gradient(135deg, #25d366, #128c7e);
        color: white;
        padding: 1.3rem 3rem;
        border-radius: 20px;
        font-size: 1.4rem;
        font-weight: 800;
        text-decoration: none;
        box-shadow: 0 15px 45px rgba(37, 211, 102, 0.4);
        transition: all 0.3s ease;
        margin-top: 1.5rem;
    }
body.page-enroll-premium .whatsapp-btn-large:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 55px rgba(37, 211, 102, 0.5);
    }
body.page-enroll-premium .whatsapp-btn-large i {
        font-size: 2rem;
    }
body.page-enroll-premium /* Callback Request Form */
    .callback-request-section {
        background: var(--white);
        border-radius: 28px;
        padding: 3rem;
        box-shadow: 0 25px 70px rgba(114, 9, 183, 0.12);
        margin-top: 2rem;
        border: 2px solid rgba(114, 9, 183, 0.1);
    }
body.page-enroll-premium .callback-request-section h2 {
        font-size: 2rem;
        font-weight: 800;
        color: var(--c3);
        margin-bottom: 1rem;
        text-align: center;
    }
body.page-enroll-premium .callback-request-section .subtitle {
        font-size: 1.1rem;
        color: #6b7280;
        text-align: center;
        margin-bottom: 2.5rem;
        line-height: 1.6;
    }
body.page-enroll-premium .callback-form {
        max-width: 600px;
        margin: 0 auto;
    }
body.page-enroll-premium .form-group-premium {
        margin-bottom: 1.8rem;
    }
body.page-enroll-premium .form-group-premium label {
        display: block;
        font-size: 1rem;
        font-weight: 700;
        color: #374151;
        margin-bottom: 0.6rem;
    }
body.page-enroll-premium .form-group-premium label .required {
        color: #ef4444;
        margin-right: 0.3rem;
    }
body.page-enroll-premium .form-input-premium {
        width: 100%;
        padding: 1.2rem 1.5rem;
        font-size: 1.1rem;
        border: 2px solid #e5e7eb;
        border-radius: 16px;
        transition: all 0.3s ease;
        font-family: 'Vazirmatn', sans-serif;
        background: var(--gray-light);
    }
body.page-enroll-premium .form-input-premium:focus {
        outline: none;
        border-color: var(--c3);
        background: var(--white);
        box-shadow: 0 8px 25px rgba(114, 9, 183, 0.1);
        transform: translateY(-2px);
    }
body.page-enroll-premium .form-input-premium::placeholder {
        color: #9ca3af;
    }
body.page-enroll-premium .input-icon {
        position: relative;
    }
body.page-enroll-premium .input-icon i {
        position: absolute;
        left: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.3rem;
        color: var(--c3);
        pointer-events: none;
    }
body.page-enroll-premium .input-icon .form-input-premium {
        padding-left: 3.5rem;
    }
body.page-enroll-premium .btn-submit-callback {
        width: 100%;
        padding: 1.5rem;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        color: white;
        border: none;
        border-radius: 18px;
        font-size: 1.3rem;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 15px 45px rgba(247, 37, 133, 0.4);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
    }
body.page-enroll-premium .btn-submit-callback:hover:not(:disabled) {
        transform: translateY(-3px);
        box-shadow: 0 20px 55px rgba(247, 37, 133, 0.5);
    }
body.page-enroll-premium .btn-submit-callback:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
body.page-enroll-premium .btn-submit-callback i {
        font-size: 1.5rem;
    }
body.page-enroll-premium .loading-spinner {
        display: none;
        width: 24px;
        height: 24px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: page-enroll-premium-spin 0.8s linear infinite;
    }
@keyframes page-enroll-premium-spin {
        to { transform: rotate(360deg); }
    }
body.page-enroll-premium .btn-submit-callback.loading .loading-spinner {
        display: inline-block;
    }
body.page-enroll-premium .btn-submit-callback.loading .btn-text {
        display: none;
    }
body.page-enroll-premium .success-message {
        display: none;
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        padding: 1.5rem;
        border-radius: 16px;
        text-align: center;
        font-size: 1.1rem;
        font-weight: 700;
        margin-top: 1.5rem;
        animation: page-enroll-premium-slideIn 0.5s ease;
    }
body.page-enroll-premium .success-message.show {
        display: block;
    }
body.page-enroll-premium .error-message {
        display: none;
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
        padding: 1.5rem;
        border-radius: 16px;
        text-align: center;
        font-size: 1rem;
        font-weight: 600;
        margin-top: 1rem;
    }
body.page-enroll-premium .error-message.show {
        display: block;
    }
@keyframes page-enroll-premium-slideIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
body.page-enroll-premium /* Sidebar Info Card */
    .sidebar-info-card {
        background: var(--white);
        border-radius: 24px;
        padding: 2.5rem;
        box-shadow: 0 20px 60px rgba(114, 9, 183, 0.12);
        position: sticky;
        top: 120px;
    }
body.page-enroll-premium .sidebar-info-card h3 {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--c3);
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }
body.page-enroll-premium .info-list {
        list-style: none;
    }
body.page-enroll-premium .info-list li {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 0;
        font-size: 1rem;
        color: #4b5563;
        border-bottom: 1px solid rgba(114, 9, 183, 0.08);
    }
body.page-enroll-premium .info-list li:last-child {
        border-bottom: none;
    }
body.page-enroll-premium .info-icon {
        flex-shrink: 0;
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.1), rgba(114, 9, 183, 0.1));
        border-radius: 14px;
    }
body.page-enroll-premium .info-icon i {
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 1.3rem;
    }
body.page-enroll-premium .trust-badges {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 2px solid rgba(114, 9, 183, 0.1);
    }
body.page-enroll-premium .trust-badge {
        text-align: center;
        padding: 1rem;
        background: linear-gradient(135deg, rgba(247, 37, 133, 0.05), rgba(114, 9, 183, 0.05));
        border-radius: 16px;
    }
body.page-enroll-premium .trust-badge i {
        font-size: 2rem;
        background: linear-gradient(135deg, var(--c1), var(--c3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 0.5rem;
    }
body.page-enroll-premium .trust-badge .label {
        font-size: 0.85rem;
        color: #6b7280;
        font-weight: 600;
    }
/* Responsive Design */
    @media (max-width: 1024px) {
        body.page-enroll-premium .enrollment-grid {
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        body.page-enroll-premium .sidebar-info-card {
            position: static;
        }
    }
@media (max-width: 768px) {
body.page-enroll-premium .hero-title {
            font-size: 2rem;
        }
body.page-enroll-premium .hero-subtitle {
            font-size: 1.1rem;
        }
body.page-enroll-premium .enrollment-main-card, body.page-enroll-premium .callback-request-section {
            padding: 2rem;
        }
body.page-enroll-premium .course-summary {
            flex-direction: column;
        }
body.page-enroll-premium .course-thumbnail {
            width: 100%;
            height: 200px;
        }
body.page-enroll-premium .final-price-large {
            font-size: 3rem;
        }
body.page-enroll-premium .phone-number-huge {
            font-size: 2.5rem;
        }
body.page-enroll-premium .trust-badges {
            grid-template-columns: 1fr;
        }
}

/* --- enroll_verify.php @ body.page-enroll-verify --- */
body.page-enroll-verify {
            --c1: #f72585; --c3: #7209b7; --c6: #3a0ca3; --c8: #4361ee;
            --bg: #ffffff; --light: #f8f9fa; --text: #1a1a1a; --gray: #666;
            --radius: 20px; --transition: all 0.3s ease;
        }
body.page-enroll-verify > *, body.page-enroll-verify * { margin: 0; padding: 0; box-sizing: border-box; }
body.page-enroll-verify { font-family: 'Vazirmatn', sans-serif; background: var(--light); color: var(--text); line-height: 1.8; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
body.page-enroll-verify .container { max-width: 500px; width: 100%; }
body.page-enroll-verify .card { background: var(--bg); border-radius: var(--radius); padding: 2rem; box-shadow: 0 8px 24px rgba(0,0,0,0.08); text-align: center; }
body.page-enroll-verify .title { font-size: 1.6rem; color: var(--c3); margin-bottom: 1.5rem; font-weight: 700; }
body.page-enroll-verify .message-box { background: #fff3cd; border: 2px solid #ffc107; border-radius: 12px; padding: 2rem; margin: 1.5rem 0; }
body.page-enroll-verify .message-box i { font-size: 3rem; color: #856404; margin-bottom: 1rem; }
body.page-enroll-verify .message-box h3 { color: #856404; margin-bottom: 1rem; font-size: 1.3rem; }
body.page-enroll-verify .phone-link { display: inline-block; margin-top: 1rem; padding: 1rem 2rem; background: linear-gradient(135deg, #28a745, #20c997); color: white; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1.2rem; box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); transition: var(--transition); }
body.page-enroll-verify .phone-link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4); }
body.page-enroll-verify .back-link { display: block; text-align: center; margin-top: 1.5rem; color: var(--c8); font-size: 0.9rem; text-decoration: none; }
body.page-enroll-verify .back-link:hover { text-decoration: underline; }

/* --- submit_resume.php @ body.page-submit-resume --- */
body.page-submit-resume {
            --c1: #f72585; --c2: #b5179e; --c3: #7209b7; --c4: #560bad; --c5: #480ca8;
            --c6: #3a0ca3; --c7: #3f37c9; --c8: #4361ee; --c9: #4895ef; --c10: #4cc9f0;
            --white: #ffffff; --radius: 1.6rem; --transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
            --shadow-lg: 0 16px 36px rgba(0,0,0,0.18);
        }
body.page-submit-resume > *, body.page-submit-resume *, body.page-submit-resume *::before, body.page-submit-resume *::after { margin:0; padding:0; box-sizing:border-box; }
body.page-submit-resume, body.page-submit-resume { min-height:100dvh; font-family:'Vazirmatn',sans-serif; background:linear-gradient(135deg,var(--c1)0%,var(--c3)30%,var(--c6)70%,var(--c10)100%); background-attachment:fixed; color: #fff; display:flex; flex-direction:column; }
body.page-submit-resume .sib-particles { position:fixed; inset:0; pointer-events:none; z-index:1; }
body.page-submit-resume .sib-particle { position:absolute; background:rgba(255,255,255,0.14); border-radius:50%; filter:blur(1.2px); animation:page-submit-resume-float 18s infinite linear; box-shadow:0 0 8px rgba(255,255,255,0.2); }
@keyframes page-submit-resume-float { 0%{transform:translateY(100dvh) scale(0.5) rotate(0deg);opacity:0} 10%,90%{opacity:0.7} 100%{transform:translateY(-150px) scale(1) rotate(360deg);opacity:0} }
body.page-submit-resume main { flex:1; display:flex; align-items:center; justify-content:center; padding:1.2rem 1rem; z-index:2; }
body.page-submit-resume .resume-container { max-width:400px; width:100%; display:flex; flex-direction:column; gap:0.8rem; }
body.page-submit-resume .resume-card {
            background:rgba(255,255,255,0.96); backdrop-filter:blur(18px);
            border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);
            animation:page-submit-resume-fadeInUp 0.8s ease-out forwards; opacity:0;
            border:1px solid rgba(255,255,255,0.5);
        }
@keyframes page-submit-resume-fadeInUp { to { opacity:1; transform:translateY(0); } }
body.page-submit-resume .resume-header {
            background:linear-gradient(135deg,var(--c1),var(--c5));
            color:white; text-align:center; padding:1.2rem 1rem;
            text-shadow:0 2px 6px rgba(0,0,0,0.2);
            border-bottom:1px solid rgba(255,255,255,0.35);
        }
body.page-submit-resume .resume-header h2 { font-size:1.25rem; font-weight:700; margin-bottom:0.25rem; }
body.page-submit-resume .resume-header p { font-size:0.82rem; opacity:0.92; }
body.page-submit-resume .resume-body { padding:1.2rem 1.2rem; display:flex; flex-direction:column; gap:0.9rem; }
body.page-submit-resume .alert {
            padding:0.7rem 1rem; border-radius:1rem; font-size:0.82rem; font-weight:600;
            text-align:center; display:flex; align-items:center; justify-content:center; gap:0.5rem;
            animation:page-submit-resume-shake 0.6s ease-in-out;
        }
body.page-submit-resume .alert.success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
body.page-submit-resume .alert.danger { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
@keyframes page-submit-resume-shake { 0%,100%{transform:translateX(0)} 10%,30%,50%,70%,90%{transform:translateX(-4px)} 20%,40%,60%,80%{transform:translateX(4px)} }
body.page-submit-resume .form-row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.9rem;
        }
@media (max-width: 640px) {
body.page-submit-resume .form-row { grid-template-columns: 1fr; }
}
body.page-submit-resume .form-group { display:flex; flex-direction:column; gap:0.45rem; }
body.page-submit-resume .form-group label {
            font-weight:600; color:var(--c3); font-size:0.82rem; display:flex; align-items:center; gap:0.3rem;
        }
body.page-submit-resume .form-group label span { color:#e63946; font-size:0.78rem; }
body.page-submit-resume .form-control {
            width:100%; padding:0.65rem 0.9rem; border:2px solid transparent;
            border-radius:1rem; font-size:0.85rem; background:rgba(255,255,255,0.8);
            backdrop-filter:blur(5px); transition:var(--transition); color:var(--c3);
        }
body.page-submit-resume .form-control::placeholder { color:var(--c6); opacity:0.7; }
body.page-submit-resume .form-control:focus {
            outline:none; border-color:var(--c8); background:var(--white);
            box-shadow:0 0 0 4.5px rgba(67,97,238,0.25); transform:translateY(-1px);
        }
body.page-submit-resume .file-input {
            padding:0.8rem; border:2px dashed #ccc; border-radius:1rem;
            text-align:center; cursor:pointer; transition:var(--transition);
            background:var(--gray-light); position:relative;
        }
body.page-submit-resume .file-input:hover { border-color:var(--c10); background:rgba(76,201,240,0.05); }
body.page-submit-resume .file-input input { display:none; }
body.page-submit-resume .file-input label {
            cursor:pointer; color:var(--c5); font-weight:600; font-size:0.82rem;
            display:flex; align-items:center; justify-content:center; gap:0.4rem;
        }
body.page-submit-resume .file-name {
            margin-top:0.4rem; font-size:0.78rem; color:#666; word-break:break-all;
        }
body.page-submit-resume .submit-btn {
            padding:0.7rem 1.4rem; border:none; border-radius:1rem; font-weight:700;
            font-size:0.88rem; cursor:pointer; width:100%; position:relative; overflow:hidden;
            background:linear-gradient(135deg,var(--c8),var(--c10)); color:white;
            box-shadow:0 6px 18px rgba(67,97,238,0.4); transition:var(--transition);
            display:flex; align-items:center; justify-content:center; gap:8px; margin-top:0.6rem;
        }
body.page-submit-resume .submit-btn::before {
            content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
            background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
            transition:0.7s;
        }
body.page-submit-resume .submit-btn:hover::before { left:100%; }
body.page-submit-resume .submit-btn:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(67,97,238,0.5); }
@media (max-width:576px) {
body.page-submit-resume main { padding:1rem 0.6rem; }
body.page-submit-resume .resume-header { padding:1rem 0.8rem; }
body.page-submit-resume .resume-header h2 { font-size:1.1rem; }
body.page-submit-resume .resume-body { padding:1rem 1rem; }
}

/* --- login.php @ body.page-auth --- */
/* Hook for WebKit autofill detection (paired with JS above). */
        @keyframes onAutoFillStart { from {} to {} }
body.page-auth input:-webkit-autofill { animation-name: onAutoFillStart; animation-duration: 0.001s; }
/* auth-light.css - مینیمال */

body.page-auth {
    --c1: #ec4899;
    --c2: #d6409f;
    --c3: #7c3aed;
    --c4: #6d28d9;
    --c5: #5b21b6;
    --c6: #5145cd;
    --c7: #4f46e5;
    --c8: #4f6ef7;
    --c9: #5b9df9;
    --c10: #38bdf8;
    --white: #ffffff;
    --radius: 1.4rem;
    --radius-sm: 0.85rem;
    --transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    --shadow-lg: 0 20px 50px -20px rgba(45,30,90,0.22);
    --text-primary: #1c1830;
    --text-secondary: #5b5670;
    --text-muted: #6c6788;
    --border-light: rgba(28,24,48,0.10);
}
body.page-auth > *, body.page-auth *, body.page-auth *::before, body.page-auth *::after { margin: 0; padding: 0; box-sizing: border-box; }
body.page-auth {
    min-height: 100dvh;
    background: linear-gradient(135deg, var(--c1) 0%, var(--c3) 30%, var(--c6) 70%, var(--c10) 100%);
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
body.page-auth /* ═══ ذرات ═══ */
.sib-particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
body.page-auth .sib-particle {
    position: absolute;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    filter: blur(1px);
    animation: page-auth-float 20s infinite linear;
}
@keyframes page-auth-float {
    0%   { transform: translateY(100dvh) scale(0.5); opacity: 0; }
    10%, 90% { opacity: 0.6; }
    100% { transform: translateY(-100px) scale(1); opacity: 0; }
}
body.page-auth .bg-shapes { display: none; }
body.page-auth /* ═══ بازگشت ═══ */
.back-to-home { position: fixed; top: 1.2rem; right: 1.2rem; z-index: 10; }
body.page-auth .back-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    background: rgba(30,10,60,0.55);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    border: 1px solid rgba(255,255,255,0.2);
}
body.page-auth .back-link:hover { background: rgba(30,10,60,0.7); }
body.page-auth /* ═══ کانتینر ═══ */
.auth-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
}
body.page-auth .auth-container {
    max-width: 380px;
    width: 100%;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: page-auth-fadeUp 0.6s ease-out forwards;
    opacity: 0;
    border: 1px solid rgba(255,255,255,0.4);
    overflow: hidden;
}
@keyframes page-auth-fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.page-auth /* ═══ لوگو — مستطیلی ═══ */
.auth-logo {
    text-align: center;
    padding: 1.5rem 2rem 0.3rem;
}
body.page-auth .auth-logo img {
    max-width: 95px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 0.4rem;
    /* بدون border-radius مربعی — لوگو مستطیلی همان‌طور نمایش داده شود */
}
body.page-auth .auth-logo h1 {
    color: var(--text-primary);
    margin-bottom: 0.1rem;
}
body.page-auth .auth-logo p {
    color: var(--text-muted);
    text-align: center;
}
body.page-auth /* ═══ فرم ═══ */
.auth-form {
    padding: 0.8rem 2rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
body.page-auth .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
body.page-auth .form-label {
    color: var(--text-secondary);
}
body.page-auth .form-control {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--white);
    transition: var(--transition);
    color: var(--text-primary);
    outline: none;
}
body.page-auth .form-control::placeholder {
    color: var(--text-muted);
}
body.page-auth .form-control:focus {
    border-color: var(--c8);
    box-shadow: 0 0 0 3px rgba(67,97,238,0.12);
}
body.page-auth .form-control.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}
body.page-auth .form-control.valid {
    border-color: #10b981;
}
body.page-auth /* ═══ پسورد ═══ */
.password-wrapper { position: relative; }
body.page-auth .password-wrapper .form-control { padding-left: 2.8rem; }
body.page-auth .password-toggle {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem;
    transition: var(--transition);
    display: flex;
}
body.page-auth .password-toggle:hover { color: var(--c3); }
body.page-auth /* ═══ خطاها ═══ */
.error-message {
    color: #ef4444;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.25s ease;
}
body.page-auth .error-message.show {
    opacity: 1;
    max-height: 30px;
}
body.page-auth /* ═══ آلرت ═══ */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 2rem;
}
body.page-auth .alert-success, body.page-auth .alert.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
body.page-auth .alert-danger, body.page-auth .alert.danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
body.page-auth /* ═══ دکمه ═══ */
.btn-submit {
    padding: 0.65rem;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    width: 100%;
    background: linear-gradient(135deg, var(--c3), var(--c8));
    color: white;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0.3rem;
    box-shadow: 0 4px 14px rgba(114,9,183,0.3);
}
body.page-auth .btn-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(114,9,183,0.4);
}
body.page-auth .btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
body.page-auth /* ═══ اسپینر ═══ */
.spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
body.page-auth .spinner.is-active { display: inline-block; }
body.page-auth /* Small helper text shown under an input (e.g. "we'll text this number") */
.auth-form-hint {
    margin-top: 6px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Slightly larger emphasized link inside .auth-footer */
@keyframes spin { to { transform: rotate(360deg); } }
body.page-auth /* ═══ لینک‌ها ═══ */
.auth-links {
    text-align: center;
    padding: 0.2rem 0;
}
body.page-auth .auth-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--c5);
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
body.page-auth .auth-link:hover { color: var(--c3); background: rgba(114,9,183,0.04); }
body.page-auth /* ═══ دیوایدر ═══ */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.3rem 2rem;
    color: var(--text-muted);
}
body.page-auth .auth-divider::before, body.page-auth .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}
body.page-auth /* ═══ فوتر ═══ */
.auth-footer {
    text-align: center;
    padding: 0.3rem 2rem 1rem;
}
body.page-auth .auth-footer .auth-link {
    color: var(--c3);
    background: rgba(114,9,183,0.03);
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(114,9,183,0.08);
}
body.page-auth .auth-footer .auth-link:hover {
    background: rgba(114,9,183,0.08);
    border-color: rgba(114,9,183,0.15);
}
body.page-auth /* ═══ لودینگ ═══ */
.form-loading { pointer-events: none; opacity: 0.7; }
body.page-auth /* ═══ قوانین ═══ */
.auth-form .auth-links { color: var(--text-muted); }
body.page-auth .auth-form .auth-links a { color: var(--c2); text-decoration: none;  }
body.page-auth .auth-form .auth-links a:hover { text-decoration: underline; }
/* ═══ ریسپانسیو ═══ */
@media (max-width: 480px) {
    body.page-auth body { padding: 1rem 0.5rem; }
    body.page-auth .auth-container { border-radius: 1rem; }
    body.page-auth .auth-logo { padding: 1.2rem 1.5rem 0.2rem; }
    body.page-auth .auth-logo img { max-width: 80px; }
    body.page-auth .auth-form { padding: 0.6rem 1.5rem 0.5rem; }
    body.page-auth .auth-divider { padding: 0.2rem 1.5rem; }
    body.page-auth .auth-footer { padding: 0.3rem 1.5rem 1rem; }
    body.page-auth .alert { margin: 0 1.5rem; }
    body.page-auth .back-to-home { top: 0.8rem; right: 0.8rem; }
    body.page-auth .back-link {  padding: 0.4rem 0.8rem; }
    /* larger touch targets on small screens */
    body.page-auth .btn-submit { min-height: 44px; padding: 0.75rem;  }
    body.page-auth .form-control { min-height: 40px; }
}
body.page-auth /* ═══ OTP ═══ */
.otp-inputs { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
body.page-auth .otp-input {
    width: 48px; height: 52px; text-align: center;
     
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--text-primary);
    transition: var(--transition);
}
body.page-auth .otp-input:focus { border-color: var(--c8); box-shadow: 0 0 0 3px rgba(67,97,238,0.12); outline: none; }
body.page-auth .password-strength { margin-top: 4px; }
body.page-auth .strength-bar { height: 3px; border-radius: 3px; background: var(--border-light); overflow: hidden; }
body.page-auth .strength-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; width: 0; }
body.page-auth .strength-fill.weak { width: 33%; background: #ef4444; }
body.page-auth .strength-fill.medium { width: 66%; background: #f59e0b; }
body.page-auth .strength-fill.strong { width: 100%; background: #10b981; }
body.page-auth .otp-timer { text-align: center; margin-top: 14px;  color: var(--text-secondary);  }
body.page-auth .otp-timer.expired { color: #ef4444; }
body.page-auth .resend-btn {
    background: transparent; border: none; color: var(--c3);
      cursor: pointer;
    padding: 6px 14px; border-radius: 6px;
    transition: var(--transition); 
}
body.page-auth .resend-btn:hover:not(:disabled) { background: rgba(114,9,183,0.06); }
body.page-auth .resend-btn:disabled { opacity: 0.5; cursor: not-allowed; }
body.page-auth ::-webkit-scrollbar { width: 6px; }
body.page-auth ::-webkit-scrollbar-track { background: transparent; }
body.page-auth ::-webkit-scrollbar-thumb { background: var(--c8); border-radius: 3px; }

/* --- register.php @ body.page-auth --- */
body.page-auth .label-row {display:flex;align-items:center;justify-content:space-between;gap:8px}
body.page-auth .suggest-pass-btn {
                        display:inline-flex;align-items:center;gap:6px;
                        background:linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.12));
                        color:var(--c2);border:1px solid rgba(99,102,241,.25);
                        border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;
                        cursor:pointer;transition:all .2s;font-family:inherit;
                    }
body.page-auth .suggest-pass-btn:hover {transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,.2);background:linear-gradient(135deg, rgba(99,102,241,.22), rgba(168,85,247,.22))}
body.page-auth .suggest-pass-btn i {font-size:14px}
body.page-auth .suggest-pass-hint {
                        display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:8px 12px;
                        background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);
                        border-radius:8px;font-size:12px;color:#16a34a;line-height:1.6;
                    }
body.page-auth .suggest-pass-hint i {flex-shrink:0;margin-top:2px}
body.page-auth .suggest-pass-hint[hidden] {display:none}
/* Hook for WebKit autofill detection (paired with JS above). */
        @keyframes onAutoFillStart { from {} to {} }
body.page-auth input:-webkit-autofill { animation-name: onAutoFillStart; animation-duration: 0.001s; }

/* --- 404.php @ body.page-404 --- */
body.page-404 {
            --c1: #f72585;
            --c3: #7209b7;
            --c8: #4361ee;
            --bg: #0b0815;
            --text-1: #f5f3ff;
            --text-2: #a78bfa;
            --text-3: #6b7280;
            --border: rgba(167,139,250,0.15);
        }
body.page-404 > *, body.page-404 * { margin: 0; padding: 0; box-sizing: border-box; }
body.page-404 {
            font-family: 'Vazirmatn', sans-serif;
            background: var(--bg);
            color: var(--text-1);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }
body.page-404 /* یک هاله نرم در پس‌زمینه */
        body::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(114,9,183,0.18) 0%, transparent 65%);
            pointer-events: none;
        }
body.page-404 .wrap {
            text-align: center;
            max-width: 460px;
            position: relative;
            z-index: 1;
        }
body.page-404 .code {
            font-size: clamp(6rem, 18vw, 9rem);
            font-weight: 800;
            line-height: 1;
            letter-spacing: -0.04em;
            background: linear-gradient(135deg, var(--c1), var(--c3), var(--c8));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1.5rem;
        }
body.page-404 .title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-1);
            margin-bottom: 0.6rem;
        }
body.page-404 .subtitle {
            font-size: 0.92rem;
            color: var(--text-3);
            line-height: 1.8;
            margin-bottom: 2rem;
        }
body.page-404 .actions {
            display: flex;
            gap: 0.6rem;
            justify-content: center;
            flex-wrap: wrap;
        }
body.page-404 .btn {
            padding: 0.7rem 1.4rem;
            border-radius: 10px;
            font-family: inherit;
            font-weight: 600;
            font-size: 0.88rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
        }
body.page-404 .btn-primary {
            background: linear-gradient(135deg, var(--c3), var(--c8));
            color: #fff;
        }
body.page-404 .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(114,9,183,0.35);
        }
body.page-404 .btn-ghost {
            background: transparent;
            color: var(--text-2);
            border: 1px solid var(--border);
        }
body.page-404 .btn-ghost:hover {
            border-color: var(--text-2);
            color: var(--text-1);
        }
body.page-404 .brand {
            position: absolute;
            bottom: 1.5rem;
            left: 0;
            right: 0;
            text-align: center;
            color: var(--text-3);
            font-size: 0.75rem;
        }

/* --- 403.php @ body.page-403 --- */
body.page-403 {
            --c1: #f72585;
            --c3: #7209b7;
            --c8: #4361ee;
            --c10: #4cc9f0;
            --bg: #0b0815;
            --text-1: #f5f3ff;
            --text-2: #a78bfa;
            --text-3: #6b7280;
            --border: rgba(167,139,250,0.18);
        }
body.page-403 > *, body.page-403 * { margin: 0; padding: 0; box-sizing: border-box; }
body.page-403 {
            font-family: 'Vazirmatn', sans-serif;
            background: var(--bg);
            color: var(--text-1);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }
body.page-403 /* هاله محوری در پس‌زمینه */
        body::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 700px;
            height: 700px;
            background: radial-gradient(circle, rgba(114,9,183,0.22) 0%, rgba(67,97,238,0.08) 40%, transparent 70%);
            pointer-events: none;
            animation: page-403-breathe 8s ease-in-out infinite;
        }
@keyframes page-403-breathe {
            0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
            50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
        }
body.page-403 /* خطوط نازک تزئینی */
        body::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(167,139,250,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(167,139,250,0.04) 1px, transparent 1px);
            background-size: 40px 40px;
            mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
            pointer-events: none;
        }
body.page-403 .wrap {
            text-align: center;
            max-width: 480px;
            position: relative;
            z-index: 1;
            animation: page-403-fadeUp 0.7s ease;
        }
@keyframes page-403-fadeUp {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: translateY(0); }
        }
body.page-403 /* آیکون قفل دایره‌ای */
        .lock-badge {
            width: 72px;
            height: 72px;
            margin: 0 auto 1.5rem;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(247,37,133,0.18), rgba(114,9,183,0.18));
            border: 1px solid rgba(247,37,133,0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fbcfe8;
            font-size: 1.5rem;
            position: relative;
            box-shadow: 0 0 30px rgba(247,37,133,0.2);
        }
body.page-403 .lock-badge::before {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 1px solid rgba(247,37,133,0.18);
            animation: page-403-ring 3s ease-in-out infinite;
        }
@keyframes page-403-ring {
            0%, 100% { opacity: 0.6; transform: scale(1); }
            50%      { opacity: 0;   transform: scale(1.25); }
        }
body.page-403 .code {
            font-size: clamp(6rem, 18vw, 9rem);
            font-weight: 800;
            line-height: 1;
            letter-spacing: -0.04em;
            background: linear-gradient(135deg, var(--c1) 0%, var(--c3) 50%, var(--c8) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1.25rem;
            filter: drop-shadow(0 8px 24px rgba(114,9,183,0.3));
        }
body.page-403 .title {
            font-size: 1.35rem;
            font-weight: 700;
            background: linear-gradient(90deg, var(--white), #c4b5fd);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.7rem;
        }
body.page-403 .subtitle {
            font-size: 0.92rem;
            color: var(--text-3);
            line-height: 1.85;
            margin-bottom: 2rem;
        }
body.page-403 .actions {
            display: flex;
            gap: 0.6rem;
            justify-content: center;
            flex-wrap: wrap;
        }
body.page-403 .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 11px;
            font-family: inherit;
            font-weight: 600;
            font-size: 0.88rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            border: none;
            transition: all 0.25s ease;
            position: relative;
            overflow: hidden;
        }
body.page-403 .btn-primary {
            background: linear-gradient(135deg, var(--c3), var(--c8));
            color: #fff;
            box-shadow: 0 6px 20px rgba(114,9,183,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
        }
body.page-403 .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 26px rgba(247,37,133,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
        }
body.page-403 .btn-primary::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
            transform: translateX(-100%);
            transition: transform 0.55s ease;
        }
body.page-403 .btn-primary:hover::before { transform: translateX(100%); }
body.page-403 .btn-ghost {
            background: rgba(255,255,255,0.03);
            color: var(--text-2);
            border: 1px solid var(--border);
            backdrop-filter: blur(8px);
        }
body.page-403 .btn-ghost:hover {
            background: rgba(167,139,250,0.08);
            border-color: rgba(167,139,250,0.45);
            color: #fff;
            transform: translateY(-2px);
        }
body.page-403 .brand {
            position: absolute;
            bottom: 1.5rem;
            left: 0;
            right: 0;
            text-align: center;
            color: var(--text-3);
            font-size: 0.75rem;
            letter-spacing: 0.04em;
        }
body.page-403 .brand strong {
            background: linear-gradient(90deg, var(--c1), var(--c10));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
        }
@media (max-width: 480px) {
body.page-403 .actions { flex-direction: column; width: 100%; }
body.page-403 .btn { width: 100%; justify-content: center; }
}


/* ===== Converted inline styles (per-page scoped utility classes) ===== */
body.page-index .il1 { text-align:center;margin-top:3rem; }
body.page-index .il2 { padding:0.75rem 2rem;font-size:1rem; }
body.page-index .il3 { text-align: center; margin-top: 2.5rem; color: #5c6bc0; font-size: 1.05rem; font-weight: 600; }
body.page-index .il4 { margin-left: 0.5rem; color: var(--c3); }
body.page-index .il5 { position:relative;z-index:1; }
body.page-index .il6 { margin-top:2.5rem; }
body.page-index .il7 { padding:2.5rem 0; }
body.page-index .il8 { color:#7a7589;font-size:.85rem;margin:.25rem 0 1.25rem;line-height:1.7; }
body.page-index .il9 { grid-column:1/-1;margin-top:.6rem;justify-content:center; }
body.page-index .il10 { display: none; }
body.page-index .il11 { flex: 1; }
body.page-index .il12 { text-align:center;color:#5c6bc0;font-size:1.1rem;padding:3rem 0; }
body.page-index .il13 { font-size:3rem;display:block;margin-bottom:1rem;opacity:0.5; }
body.page-index .il14 { width:100%;margin-top:.9rem; }
body.page-index .il15 { text-align:center;color:#5c6bc0;font-size:1rem;padding:.4rem 0; }
body.page-index .il16 { color:var(--c3);font-weight:700;text-decoration:underline; }
body.page-index .il17 { color:var(--c3);font-weight:700;text-decoration:underline; }
body.page-contact-us .il18 { font-size:.85rem; }
body.page-contact-us .il19 { font-size:.85rem; }
body.page-contact-us .il20 { font-size:.85rem; }
body.page-contact-us .il21 { width:100%; margin-top:1rem; }
body.page-courses .il22 { font-size:clamp(2.2rem,1.5rem+3vw,4rem) !important; }
body.page-blog-post .il23 { display:inline-flex; }
body.page-blog-post .il24 { font-size: 1.6rem; margin-bottom: 1.6rem; color: var(--c3); }
body.page-blog-post .il25 { color: #999; font-size: 0.9rem; margin-right: 1rem; }
body.page-blog-post .il26 { margin-top: 0.4rem; }
body.page-auth .il27 { margin-top: 16px; font-size: 13px; color: var(--gray); }
body.page-auth .il28 { color: var(--c2); }
body.page-auth .il29 { font-size: 15px; }
body.page-learning-path .il30 { opacity:.85;font-weight:600;font-size:1rem; }
body.page-contact .il31 { color:var(--c3,#7209b7);font-weight:700;text-decoration:underline; }
body.page-course-detail .il32 { display: flex; align-items: center; gap: 1.5rem; }
body.page-course-detail .il33 { margin-bottom: 1rem; color: #6b7280; }
body.page-course-detail .il34 { font-size:11px;background:#d1fae5;color:#065f46;padding:2px 7px;border-radius:10px;margin-right:6px; }
body.page-course-detail .il35 { color: #6b7280; }
body.page-course-detail .il36 { color: #6b7280; }
body.page-course-detail .il37 { margin-bottom: 3rem; }
body.page-course-detail .il38 { background: #e0f2fe; border: 1px solid #0ea5e9; padding: 1rem; border-radius: 12px; margin-bottom: 1.5rem; }
body.page-course-detail .il39 { margin-bottom: 1.5rem; font-size: 1.3rem; font-weight: 600; }
body.page-course-detail .il40 { font-weight: 600; margin-bottom: 0.75rem; display: block; }
body.page-course-detail .il41 { margin-top: 1.5rem; }
body.page-course-detail .il42 { font-weight: 600; margin-bottom: 0.75rem; display: block; }
body.page-course-detail .il43 { width: 100%; padding: 1rem; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 1rem; resize: vertical; transition: all 0.3s; }
body.page-course-detail .il44 { color: #6b7280; font-size: 0.9rem; margin-top: 0.5rem; }
body.page-course-detail .il45 { margin-top: 1.5rem; background: var(--grad-brand); color: #fff; padding: .65rem 1.5rem; border: none; border-radius: 999px; font-size: .85rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(124,58,237,.7); transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .28s; display: inline-flex; align-items: center; gap: 0.5rem; }
body.page-course-detail .il46 { background: #fef3c7; border: 1px solid #f59e0b; padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem; text-align: center; }
body.page-course-detail .il47 { font-size: 1.5rem; }
body.page-course-detail .il48 { margin-top: 0.5rem; font-weight: 600; }
body.page-course-detail .il49 { margin: 2rem 0 1.5rem; font-size: 1.3rem; font-weight: 600; }
body.page-course-detail .il50 { color: #6b7280; text-align: center; padding: 3rem; font-size: 1.1rem; }
body.page-course-detail .il51 { font-size: 3rem; display: block; margin-bottom: 1rem; opacity: 0.5; }
body.page-course-detail .il52 { background: #dbeafe; border: 1px solid #3b82f6; padding: 0.75rem 1.25rem; border-radius: 12px; margin-top: 1.5rem; text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
body.page-course-detail .il53 { font-size: 1.15rem; }
body.page-course-detail .il54 { font-weight: 600; }
body.page-course-detail .il55 { color: var(--c7); text-decoration: underline; }
body.page-course-detail .il56 { font-size: 1.2rem; }
body.page-course-detail .il57 { margin:0; }
body.page-course-detail .il58 { width:100%;border:none;cursor:pointer; }
body.page-enroll .il59 { text-align: center; }
body.page-enroll-premium .il60 { text-align: center; }


/* =====================================================================
   UNIFIED DARK THEME LAYER  (appended — affects [data-theme="dark"] only)
   Root cause fixed: page scopes re-declared light vars that out-specified
   the global dark block. Here we remap each public page scope's tokens to
   dark with a correctly-directed, higher-specificity selector.
   Hardcoded background whites/greys + dark text were converted to the
   themeable --white / --gray-light / --text tokens above (light-identical),
   so remapping the tokens below flips every surface at once.
   ===================================================================== */
[data-theme="dark"] body.page-index,
[data-theme="dark"] body.page-blog,
[data-theme="dark"] body.page-blog-post,
[data-theme="dark"] body.page-about,
[data-theme="dark"] body.page-contact-us,
[data-theme="dark"] body.page-learning-path,
[data-theme="dark"] body.page-course-detail,
[data-theme="dark"] body.page-view-instructor,
[data-theme="dark"] body.page-courses,
[data-theme="dark"] body.page-enroll,
[data-theme="dark"] body.page-enroll-premium,
[data-theme="dark"] body.page-enroll-verify,
[data-theme="dark"] body.page-submit-resume,
[data-theme="dark"] body.page-terms,
[data-theme="dark"] body.page-privacy,
[data-theme="dark"] body.page-contact,
[data-theme="dark"] body.page-auth {
    --bg:#0f0d1a; --page:#0f0d1a; --light:#0f0d1a; --dark:#0f0d1a;
    --white:#17142a;
    --gray-light:#1d1936; --gray-dark:#eceaf6;
    --text:#eceaf6; --text-dark:#eceaf6; --text-primary:#eceaf6; --text-secondary:#c4c0d8;
    --ink:#eceaf6; --ink-2:#c4c0d8; --muted:#9b96b6; --text-muted:#9b96b6; --gray:#9b96b6;
    --surface:#17142a; --surface-2:#1d1936; --surface-3:#221d40;
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
    --border-color:rgba(255,255,255,.10); --border-soft:rgba(255,255,255,.07);
    --border-light:rgba(255,255,255,.10); --light-gray:rgba(255,255,255,.10);
    --shadow:0 18px 48px rgba(0,0,0,.55); --shadow-glow:0 0 30px rgba(124,58,237,.30);
}

/* --- Base surfaces & text for every public page in dark mode --- */
[data-theme="dark"] body.page-index,
[data-theme="dark"] body.page-blog,
[data-theme="dark"] body.page-blog-post,
[data-theme="dark"] body.page-about,
[data-theme="dark"] body.page-contact-us,
[data-theme="dark"] body.page-learning-path,
[data-theme="dark"] body.page-course-detail,
[data-theme="dark"] body.page-view-instructor,
[data-theme="dark"] body.page-courses,
[data-theme="dark"] body.page-enroll,
[data-theme="dark"] body.page-enroll-premium,
[data-theme="dark"] body.page-enroll-verify,
[data-theme="dark"] body.page-submit-resume,
[data-theme="dark"] body.page-terms,
[data-theme="dark"] body.page-privacy,
[data-theme="dark"] body.page-contact,
[data-theme="dark"] body.page-auth {
    background: var(--page, #0f0d1a);
    color: var(--ink, #eceaf6);
}

/* --- policy & contact pages: dark-mode text/border fixes ---
   These surfaces used hardcoded light-mode grays that don't flip. */
[data-theme="dark"] body.page-terms .policy-card,
[data-theme="dark"] body.page-privacy .policy-card,
[data-theme="dark"] body.page-contact .contact-list {
    border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] body.page-terms .policy-card p,
[data-theme="dark"] body.page-terms .policy-card li,
[data-theme="dark"] body.page-privacy .policy-card p,
[data-theme="dark"] body.page-privacy .policy-card li,
[data-theme="dark"] body.page-contact .contact-note-text p {
    color: #c4c0d8;
}
[data-theme="dark"] body.page-terms .policy-updated,
[data-theme="dark"] body.page-privacy .policy-updated {
    color: #9b96b6;
}
[data-theme="dark"] body.page-contact .contact-item {
    border-bottom-color: rgba(255,255,255,.07);
}
[data-theme="dark"] body.page-contact .contact-item-info span {
    color: #9b96b6;
}

/* --- auth pages: dark-mode surface fixes ---
   .auth-container and a few helpers were hardcoded as translucent white
   instead of themeable tokens, so the card stayed light on the dark
   page background. Remap them to dark surfaces. */
[data-theme="dark"] body.page-auth .auth-container {
    background: rgba(23,20,42,0.97);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}
[data-theme="dark"] body.page-auth .form-control {
    background: rgba(15,13,26,0.9);
    border-color: rgba(255,255,255,0.12);
    color: var(--text, #eceaf6);
}
[data-theme="dark"] body.page-auth .form-control::placeholder {
    color: #8a85a6;
}
[data-theme="dark"] body.page-auth .auth-logo p {
    color: #c4c0d8;
}
[data-theme="dark"] body.page-auth .form-label {
    color: #c4c0d8;
}

/* =====================================================================
   LEARNING-PATH — dark theme surface fix
   The lp-* surfaces were hardcoded as translucent white
   (rgba(255,255,255,.x)) instead of the themeable --white token, so
   they stayed light on the dark background. Remap each surface to a
   dark, translucent equivalent so cards / tabs / stats flip correctly.
   ===================================================================== */
[data-theme="dark"] body.page-learning-path .lp-eyebrow {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
[data-theme="dark"] body.page-learning-path .lp-stat {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.09);
    box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
[data-theme="dark"] body.page-learning-path .lp-stat:hover {
    box-shadow: 0 20px 44px rgba(0,0,0,.55);
}
[data-theme="dark"] body.page-learning-path .lp-tabs-wrap {
    background: rgba(23,20,42,.82);
    border-bottom-color: rgba(255,255,255,.08);
    box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
[data-theme="dark"] body.page-learning-path .lp-tab {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
[data-theme="dark"] body.page-learning-path .lp-tab:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
[data-theme="dark"] body.page-learning-path .lp-tab .count {
    background: rgba(255,255,255,.12);
}
[data-theme="dark"] body.page-learning-path .lp-card {
    background: rgba(255,255,255,.045);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
[data-theme="dark"] body.page-learning-path .lp-card:hover {
    box-shadow: 0 26px 50px rgba(0,0,0,.55), 0 12px 30px color-mix(in srgb, var(--tc, #7209b7) 24%, transparent);
}
[data-theme="dark"] body.page-learning-path .lp-node { border-color: #17142a; }
[data-theme="dark"] body.page-learning-path .lp-step::after {
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 4px, transparent 4px 8px);
}
[data-theme="dark"] body.page-learning-path .lp-hero::before {
    background-image: radial-gradient(rgba(157,91,255,.16) 1px, transparent 1px);
}

/* --- Form controls --- */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #1d1936;
    color: #eceaf6;
    border-color: rgba(255,255,255,.14);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: rgba(236,234,246,.42); }

/* --- Tables --- */
[data-theme="dark"] table { color: #eceaf6; }
[data-theme="dark"] th, [data-theme="dark"] td { border-color: rgba(255,255,255,.10); }
[data-theme="dark"] thead th { background: #1d1936; }

/* --- Generic muted / secondary text that stayed too dark --- */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .muted,
[data-theme="dark"] small { color: #9b96b6; }

/* --- Code / pre blocks --- */
[data-theme="dark"] pre,
[data-theme="dark"] code { background: #1d1936; color: #eceaf6; }

/* --- Soft dividers --- */
[data-theme="dark"] hr { border-color: rgba(255,255,255,.10); }

/* =====================================================================
   UNIFIED HERO TYPOGRAPHY (public pages)
   Single source of truth — overrides the scattered, inconsistent
   per-page hero title/subtitle rules so every public page shares the
   same fluid, responsive scale.  Kept at the very end of the file so it
   wins the cascade over earlier per-page !important declarations
   (including those inside @media blocks).
   ===================================================================== */
:root {
    --hero-title-fs: clamp(1.3rem, 1.05rem + 1.4vw, 1.7rem);   /* 21 -> 27px */
    --hero-sub-fs:   clamp(0.9rem, 0.86rem + 0.3vw, 1.02rem);   /* 14.4 -> 16.3px */
}

/* Hero / page titles */
body.page-index .hero h1,
body.page-courses.ds-scope .courses-hero h1,
body.page-about .about-hero h1,
body.page-contact-us .hero h1,
body.page-contact .contact-hero h1,
body.page-blog .hero-content h1,
body.page-learning-path .lp-hero h1,
body.page-terms .policy-hero h1,
body.page-privacy .policy-hero h1 {
    font-size: var(--hero-title-fs) !important;
    line-height: 1.3 !important;
}

/* Hero subtitles / taglines / lead paragraphs */
body.page-index .hero .tagline,
body.page-courses.ds-scope .courses-hero .tagline,
body.page-about .about-hero .tagline,
body.page-contact-us .hero .tagline,
body.page-blog .hero-content p,
body.page-learning-path .lp-hero p.lead {
    font-size: var(--hero-sub-fs) !important;
    line-height: 1.85 !important;
}

/* =====================================================================
   ABOUT PAGE — dark theme hero fix
   The .about-hero light gradient was hardcoded on ::before and forced
   back to light by the heroGlow animation, so the hero stayed light in
   dark mode.  Darken the overlay, stop the light-gradient animation,
   and lighten the tagline text.
   ===================================================================== */
[data-theme="dark"] body.page-about .about-hero {
    background: var(--page);
    box-shadow: 0 12px 35px rgba(0,0,0,.45);
}
[data-theme="dark"] body.page-about .about-hero::before {
    background: linear-gradient(135deg,#1b1533 0%,#171429 35%,#141b33 70%,#12202e 100%) !important;
    animation: none !important;
    opacity: .95;
}
[data-theme="dark"] body.page-about .about-hero .tagline {
    color: var(--ink-2);
}

/* --- About page: dark-mode card surfaces & body text ---
   Many section cards hardcoded a translucent-white background
   (rgba(255,255,255,.7x)) and dark #4a4767 body text, so they stayed
   light and unreadable in dark mode.  Remap to a dark glass surface. */
[data-theme="dark"] body.page-about .hero-eyebrow,
[data-theme="dark"] body.page-about .hero-stats,
[data-theme="dark"] body.page-about .about-container,
[data-theme="dark"] body.page-about .course-card,
[data-theme="dark"] body.page-about .benefit-card,
[data-theme="dark"] body.page-about .team-member-card,
[data-theme="dark"] body.page-about .timeline-content,
[data-theme="dark"] body.page-about .approach-card,
[data-theme="dark"] body.page-about .value-item,
[data-theme="dark"] body.page-about .vision-goal {
    background: rgba(255,255,255,.045);
    border-color: rgba(255,255,255,.10);
}
[data-theme="dark"] body.page-about .btn-outline {
    background: rgba(255,255,255,.05);
}
[data-theme="dark"] body.page-about .about-text p,
[data-theme="dark"] body.page-about .course-body p {
    color: var(--ink-2);
}

/* --- Learning-path page: dark-mode track tabs ---
   Sticky tab bar + pills hardcoded translucent-white backgrounds, so
   they stayed light in dark mode (near-invisible text).  Darken them. */
[data-theme="dark"] body.page-learning-path .lp-tabs-wrap {
    background: rgba(23,20,42,.72);
    border-bottom-color: rgba(255,255,255,.08);
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
[data-theme="dark"] body.page-learning-path .lp-tab {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.12);
    color: var(--ink);
    box-shadow: none;
}
[data-theme="dark"] body.page-learning-path .lp-tab:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.20);
}
[data-theme="dark"] body.page-learning-path .lp-tab .count {
    background: rgba(255,255,255,.14);
}
[data-theme="dark"] body.page-learning-path .lp-eyebrow {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    box-shadow: none;
}