:root {
    /* ==========================================
       رنگ اصلی — آبی آرامش‌بخش (Peaceful Blue)
       القاکننده: اعتماد، ثبات، حرفه‌گی، آرامش
       ========================================== */
    --primary-50: #EBF2F7;
    --primary-100: #D1E0EA;
    --primary-200: #A3C1D5;
    --primary-300: #75A2BF;
    --primary-400: #4783A6;
    --primary-500: #2C6E8C;      /* پایه اصلی */
    --primary-600: #235A73;
    --primary-700: #1A455A;
    --primary-800: #123141;
    --primary-900: #091D29;

    /* ==========================================
       رنگ مکمل — سبز ذهنی (Mindful Green)
       القاکننده: تعادل، رشد، آرامش ذهن، اطمینان
       ========================================== */
    --accent-100: #E6F2ED;
    --accent-300: #8FBDAA;
    --accent-500: #3A8C6F;       /* پایه CTA */
    --accent-600: #2E735A;
    --accent-700: #225A46;

    /* ==========================================
       رنگ سوم — طلایی نرم (Soft Gold)
       القاکننده: کیفیت، ارزش، اعتماد (بدون تحریک)
       ========================================== */
    --trust-100: #F5EFE0;
    --trust-500: #D4A84B;
    --trust-600: #B89035;

    /* ==========================================
       رنگ چهارم — خاکستری آبی (Blue-Gray)
       برای متن، پس‌زمینه و سطوح فرعی
       ========================================== */
    --gray-50: #F5F8FA;
    --gray-100: #E8EEF2;
    --gray-200: #C8D4DE;
    --gray-300: #8AA3B5;         /* متن ملایم */
    --gray-400: #6A8395;
    --gray-500: #4B6375;

    /* ==========================================
       زمینه و سطوح — روشن و طبیعی
       ========================================== */
    --bg: #F7FAFC;              /* پس‌زمینه اصلی — بسیار روشن */
    --bg-alt: #EEF3F7;          /* پس‌زمینه جایگزین */
    --bg-deep: #E3EAF0;         /* پس‌زمینه عمیق‌تر */
    --surface: #FFFFFF;         /* سطوح کارت‌ها */
    --border: #D4DFE8;          /* حاشیه‌ها */
    --border-soft: #E6EEF4;     /* حاشیه نرم */

    /* ==========================================
       متن — خوانا با کنتراست بالا
       ========================================== */
    --text: #1A2A36;            /* تیره اما نرم */
    --text-secondary: #4B6375;  /* ثانویه */
    --text-muted: #8AA3B5;      /* کم‌رنگ */
    --text-on-dark: #F0F5F9;    /* متن روی پس‌زمینه تیره */
    --text-on-dark-muted: #B0C9DA;

    /* ==========================================
       نشانگرها و وضعیت‌ها
       ========================================== */
    --success: #3A8C6F;         /* موفقیت با سبز ذهنی */
    --danger: #C26A5C;          /* هشدار — قرمز ملایم‌تر */
    --whatsapp: #25D366;
    --gold: #D4A84B;            /* ستاره نظرات */

    /* ==========================================
       تایپوگرافی (بدون تغییر)
       ========================================== */
    --font-base: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
    --fs-2xs: 0.75rem;
    --fs-xs: 0.825rem;
    --fs-sm: 0.925rem;
    --fs-base: 1rem;
    --fs-md: 1.15rem;
    --fs-lg: 1.4rem;
    --fs-xl: 1.85rem;
    --fs-2xl: 2.4rem;
    --fs-3xl: 3.1rem;

    /* ==========================================
       فاصله‌گذاری (بدون تغییر)
       ========================================== */
    --sp-1: 0.4rem;
    --sp-2: 0.8rem;
    --sp-3: 1.3rem;
    --sp-4: 2.1rem;
    --sp-5: 3.2rem;
    --sp-6: 4.8rem;

    /* ==========================================
       شکل و سایه‌ها — نرم‌تر و آرام‌بخش‌تر
       ========================================== */
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 26px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 4px rgba(26, 42, 54, 0.06), 0 1px 2px rgba(26, 42, 54, 0.08);
    --shadow-md: 0 10px 30px rgba(26, 42, 54, 0.08);
    --shadow-lg: 0 24px 56px rgba(26, 42, 54, 0.12);
    --shadow-accent: 0 14px 30px rgba(58, 140, 111, 0.25);

    --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --sticky-phone-h: 64px;
}

        /* =====================================================================
   RESET & BASE
   ===================================================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }

        body {
            font-family: var(--font-base);
            background: var(--bg);
            color: var(--text);
            font-size: var(--fs-base);
            line-height: 1.85;
            padding-bottom: calc(var(--sticky-phone-h) + env(safe-area-inset-bottom));
            overflow-x: hidden;
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        img,
        svg {
            display: block;
            max-width: 100%;
            height: auto;
        }

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

        ul {
            list-style: none;
        }

        .container {
            max-width: 1140px;
            margin: 0 auto;
            padding: 0 clamp(1rem, 3vw, 1.3rem);
            width: 100%;
        }

        :focus-visible {
            outline: 3px solid var(--accent-500);
            outline-offset: 2px;
            border-radius: var(--r-sm);
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }
        }

 
        /* =====================================================================
   404 HERO
   ===================================================================== */
        .error-hero {
            flex: 1;
            display: flex;
            align-items: center;
            padding: var(--sp-5) 0 var(--sp-5);
            background: radial-gradient(900px 400px at 50% 0%, var(--primary-100) 0%, transparent 70%), var(--bg);
            min-height: 60vh;
        }

        .error-grid {
            display: grid;
            gap: var(--sp-4);
            align-items: center;
        }

        @media (min-width: 820px) {
            .error-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        .error-number {
            font-size: var(--fs-3xl);
            font-weight: 900;
            line-height: 1;
            color: var(--primary-200);
            letter-spacing: -0.05em;
        }
        .error-number .hl {
            color: var(--accent-500);
        }

        .error-content h1 {
            font-size: var(--fs-2xl);
            font-weight: 800;
            color: var(--primary-900);
            margin-bottom: var(--sp-2);
        }

        .error-content p {
            color: var(--text-secondary);
            font-size: var(--fs-md);
            max-width: 50ch;
            margin-bottom: var(--sp-3);
        }

        .error-image {
            border-radius: var(--r-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            aspect-ratio: 4/3;
            background: var(--primary-50);
        }
        .error-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .error-actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--sp-2);
            margin-top: var(--sp-3);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-weight: 800;
            font-size: var(--fs-sm);
            padding: 0.95rem 1.6rem;
            min-height: var(--touch);
            border-radius: var(--r-pill);
            border: none;
            cursor: pointer;
            transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
            white-space: nowrap;
        }

        .btn-accent {
            background: var(--accent-500);
            color: #fff;
            box-shadow: var(--shadow-accent);
        }
        .btn-accent:hover {
            background: var(--accent-600);
            transform: translateY(-2px);
        }

        .btn-primary-outline {
            background: var(--surface);
            color: var(--primary-700);
            border: 1.5px solid var(--primary-200);
            box-shadow: var(--shadow-sm);
        }
        .btn-primary-outline:hover {
            border-color: var(--primary-400);
            transform: translateY(-2px);
        }

        /* =====================================================================
   QUICK LINKS (پیشنهادات سریع)
   ===================================================================== */
        .quick-links-section {
            padding: var(--sp-4) 0 var(--sp-5);
            background: var(--bg-alt);
        }

        .quick-links-section h2 {
            font-size: var(--fs-lg);
            font-weight: 800;
            color: var(--primary-800);
            text-align: center;
            margin-bottom: var(--sp-3);
        }

        .quick-grid {
            display: grid;
            gap: var(--sp-2);
            grid-template-columns: 1fr 1fr;
            max-width: 500px;
            margin: 0 auto;
        }

        @media (min-width: 520px) {
            .quick-grid {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }

        .quick-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            padding: 0.8rem 0.6rem;
            font-weight: 700;
            font-size: var(--fs-sm);
            color: var(--text-secondary);
            transition: border-color var(--transition), color var(--transition), transform var(--transition);
            text-align: center;
            min-height: var(--touch);
        }
        .quick-link i {
            color: var(--accent-500);
            font-size: 1.1rem;
        }
        .quick-link:hover {
            border-color: var(--primary-400);
            color: var(--primary-700);
            transform: translateY(-2px);
        }

        /* =====================================================================
   SEARCH BOX
   ===================================================================== */
        .search-box {
            max-width: 400px;
            margin: var(--sp-3) auto 0;
            display: flex;
            gap: 0.5rem;
        }
        .search-box input {
            flex: 1;
            font-family: var(--font-base);
            padding: 0.7rem 1rem;
            border: 1.5px solid var(--border);
            border-radius: var(--r-pill);
            font-size: var(--fs-sm);
            background: var(--surface);
            color: var(--text);
            min-height: var(--touch);
            transition: border-color var(--transition), box-shadow var(--transition);
        }
        .search-box input:focus {
            border-color: var(--primary-400);
            box-shadow: 0 0 0 4px var(--primary-50);
            outline: none;
        }
        .search-box input::placeholder {
            color: var(--text-muted);
        }
        .search-box button {
            background: var(--primary-600);
            color: #fff;
            border: none;
            border-radius: var(--r-pill);
            padding: 0 1.2rem;
            min-height: var(--touch);
            font-weight: 700;
            cursor: pointer;
            transition: background var(--transition);
        }
        .search-box button:hover {
            background: var(--primary-700);
        }

        /* =====================================================================
   STICKY MOBILE CALL BAR
   ===================================================================== */
        .sticky-bar {
            position: fixed;
            inset-inline: 0;
            bottom: 0;
            height: var(--sticky-phone-h);
            padding-bottom: env(safe-area-inset-bottom);
            background: var(--surface);
            border-top: 1px solid var(--border);
            box-shadow: 0 -8px 24px rgba(9, 58, 79, .12);
            display: flex;
            z-index: 50;
        }
        .sticky-bar a {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-weight: 800;
            font-size: var(--fs-sm);
            min-height: var(--touch);
        }
        .sticky-bar .call {
            color: var(--primary-700);
        }
        .sticky-bar .book {
            background: var(--accent-500);
            color: #fff;
        }

  
        /* =====================================================================
   RESPONSIVE
   ===================================================================== */
        @media (max-width: 380px) {
            :root {
                --sticky-phone-h: 56px;
            }
            .btn {
                padding-inline: 1.1rem;
                font-size: var(--fs-xs);
            }
        }

        @media (max-width: 480px) {
            .error-actions .btn {
                width: 100%;
                justify-content: center;
            }
            .quick-grid {
                grid-template-columns: 1fr 1fr;
            }
            .sticky-bar a {
                font-size: var(--fs-xs);
            }
            .search-box {
                flex-direction: column;
            }
            .search-box button {
                padding: 0.7rem;
            }
        }

        @media print {
            .sticky-bar,
            header {
                display: none !important;
            }
        }