/* Thmanyah fonts (self-hosted) */
    @font-face { font-family: 'Thmanyah Display'; src: url('/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Thmanyah Display'; src: url('/fonts/thmanyahserifdisplay-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Thmanyah Text'; src: url('/fonts/thmanyahseriftext-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Thmanyah Text'; src: url('/fonts/thmanyahseriftext-Light.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Interactive elements */
    a, button, [role="button"], .btn-primary, .btn-secondary, .cat-tab, .hub-link, .related-item, details summary { cursor: pointer; }

    /* Skip nav */    .skip-link { position: absolute; top: -100px; left: 0; background: var(--primary); color: var(--dark); padding: 12px 24px; font-weight: 700; font-size: 14px; z-index: 9999; border-radius: 0 0 8px 0; transition: top 0.2s; }    .skip-link:focus { top: 0; }    /* Focus indicators */    :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    :root {
      --primary: #A69483;
      --primary-light: #D4CBB8;
      --secondary: #4D4D4D;
      --gold: #B0A464;
      --gold-light: #E5D4C0;
      --dark: #1F1F1F;
      --dark-2: #2A2A2A;
      --dark-3: #4D4D4D;
      --text: #F7F5F2;
      --text-muted: #A69483;
      --white: #F7F5F2;
      --cream: #F7F5F2;
      --cream-2: #E9E2DA;
      --cream-3: #D4CBB8;
      --pure-white: #FFFFFF;
      /* Warm surfaces */
      --surface: #FDFBF9;
      --surface-warm: #F9F5F0;
      --gold-light: #E5D4C0;
      /* Category colors */
      --cat-designs: #8B7FC7;
      --cat-guide: #5A9DAD;
      --cat-tips: #5A9E82;
      --cat-ideas: #C49340;
      --cat-tech: #C45A5A;
      /* Easing */
      --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
      /* Type scale */
      --text-xs: 0.8125rem;
      --text-sm: 0.875rem;
      --text-base: 1rem;
      --text-lg: 1.25rem;
      --leading-tight: 1.2;
      --leading-relaxed: 1.75;
    }
    body { font-family: 'IBM Plex Sans Arabic', Arial, sans-serif; background: var(--cream); color: var(--dark); direction: rtl; text-align: right; }
    /* Text hardening */
    * { overflow-wrap: break-word; word-break: break-word; }
    .card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    a { color: var(--dark); text-decoration: none; }
    a:hover { color: var(--secondary); }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

    /* HEADER */
    .site-header { background: var(--dark); padding: 16px 0; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #333; }
    .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; }
    .header-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
    .header-logo-img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; }
    .header-logo-icon { font-size: 28px; }
    .header-logo-text { color: var(--cream); font-size: 20px; font-weight: 700; }
    .header-logo-tagline { color: var(--primary); font-size: 13px; }
    .header-nav { display: flex; align-items: center; gap: 20px; }
    .header-nav a { color: var(--cream-3); font-size: 14px; transition: color 0.2s; }
    .header-nav a:hover { color: var(--cream); }
    .header-cta { background: var(--primary); color: var(--dark); padding: 10px 22px; border-radius: 8px; font-weight: 700; font-size: 14px; transition: all 0.2s; }
    .header-cta:hover { background: var(--gold-light); }
    .trust-strip { background: #0F0F0F; border-bottom: 1px solid rgba(166,148,131,0.22); color: var(--cream-3); font-size: 13px; }
    .trust-strip .container { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 38px; flex-wrap: wrap; }
    .trust-pill { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
    .trust-pill strong { color: var(--cream); font-weight: 800; }
    .trust-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--primary); opacity: 0.8; }

    /* HERO */
    .hero { background: var(--dark); padding: 80px 0 56px; position: relative; overflow: hidden; }
    .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 30% 50%, rgba(166,148,131,0.12) 0%, transparent 70%); pointer-events: none; }
    .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, var(--dark) 100%); pointer-events: none; }
    .hero > .container { position: relative; z-index: 2; }
    .hero-breadcrumb { color: var(--primary); font-size: 13px; margin-bottom: 24px; }
    .hero-breadcrumb a { color: var(--primary); display: inline-block; min-height: 44px; line-height: 44px; }
    .hero-breadcrumb a:hover { color: var(--cream); }
    .hero-breadcrumb span { margin: 0 6px; }
    .hero h1 { color: var(--cream); font-size: clamp(28px, 5vw, 48px); font-weight: 700; line-height: 1.2; margin-bottom: 16px; font-family: 'Thmanyah Display', serif; }
    .hero h1 em { color: var(--primary); font-style: normal; }
    .hero-sub { color: var(--cream-3); font-size: clamp(15px, 2vw, 18px); max-width: 640px; line-height: 1.7; margin-bottom: 32px; }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
    .btn-primary { display: inline-block; background: var(--primary); color: var(--dark); padding: 14px 32px; border-radius: 10px; font-weight: 700; font-size: 16px; transition: all 0.2s; text-decoration: none; }
    .btn-primary:hover { background: var(--gold-light); color: var(--dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(166,148,131,0.35); }
    .btn-secondary { display: inline-block; border: 2px solid var(--primary); color: var(--cream); padding: 12px 28px; border-radius: 10px; font-weight: 700; font-size: 15px; transition: all 0.2s; text-decoration: none; }
    .btn-secondary:hover { background: rgba(166,148,131,0.15); border-color: var(--gold-light); }

    /* CONTENT */
    .main-content { padding: 60px 0; }
    .section-title { font-size: 26px; font-weight: 700; color: var(--dark); margin-bottom: 8px; font-family: 'Thmanyah Display', serif; }
    .section-sub { color: var(--secondary); font-size: 16px; margin-bottom: 32px; }

    /* CARDS GRID */
    .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-bottom: 48px; }
    .card { background: var(--pure-white); border-radius: 16px; padding: 28px; border: 1px solid var(--cream-2); transition: all 0.25s; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
    .card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(166,148,131,0.15); border-color: var(--primary); }
    .card-icon { font-size: 36px; margin-bottom: 16px; }
    .card h3 { font-size: 18px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
    .card p { color: var(--secondary); font-size: 14px; line-height: 1.7; margin-bottom: 16px; }
    .card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 700; font-size: 14px; }
    .card a { text-decoration: none; color: inherit; display: block; height: 100%; }

    /* FEATURES */
    .features-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
    .features-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #444; line-height: 1.6; }
    .features-list li::before { content: '✓'; color: var(--primary); font-weight: 800; flex-shrink: 0; margin-top: 2px; }

    /* STEPS */
    .steps-list { display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px; }
    .step { display: flex; gap: 20px; align-items: flex-start; }
    .step-num { background: var(--primary); color: var(--dark); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
    .step-body h3 { font-size: 17px; font-weight: 700; color: #000; margin-bottom: 6px; }
    .step-body p { color: #555; font-size: 15px; line-height: 1.7; }

    /* FAQ */
    .faq-list { display: flex; flex-direction: column; gap: 0; border-radius: 12px; overflow: hidden; border: 1px solid #E5E5E5; }
    .faq-item { padding: 20px 24px; border-bottom: 1px solid #E5E5E5; }
    .faq-item:last-child { border-bottom: none; }
    .faq-q { font-size: 16px; font-weight: 700; color: #000; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
    .faq-q::before { content: '؟'; color: var(--primary); font-size: 20px; }
    .faq-a { color: #555; font-size: 14px; line-height: 1.8; padding-right: 28px; }

    /* RELATED */
    .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
    .related-item { background: var(--cream); border: 1px solid var(--cream-2); border-radius: 10px; padding: 14px 18px; font-size: 14px; font-weight: 600; color: var(--dark); transition: all 0.2s; text-decoration: none; }
    .related-item:hover { background: var(--cream-2); border-color: var(--primary); color: var(--primary); }

    /* CTA BANNER */
    .cta-banner { background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%); border-radius: 20px; padding: 48px 40px; text-align: center; margin: 60px 0; position: relative; overflow: hidden; }
    .cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(176,164,100,0.12) 0%, transparent 70%); pointer-events: none; }
    .cta-banner > * { position: relative; z-index: 2; }
    .cta-banner h2 { color: var(--cream); font-size: 28px; font-weight: 700; margin-bottom: 12px; }
    .cta-banner p { color: var(--cream-3); font-size: 16px; margin-bottom: 28px; }

    /* SITEMAP PAGE */
    .seo-hub { padding: 60px 0; }
    .hub-section { margin-bottom: 48px; }
    .hub-section h2 { font-size: 20px; font-weight: 700; color: var(--dark); margin-bottom: 16px; border-bottom: 2px solid var(--primary); padding-bottom: 8px; }
    .hub-links { display: flex; flex-wrap: wrap; gap: 10px; }
    .hub-link { background: var(--cream); border: 1px solid var(--cream-2); border-radius: 8px; padding: 8px 14px; font-size: 13px; color: var(--dark); transition: all 0.2s; text-decoration: none; }
    .hub-link:hover { background: var(--primary); color: var(--dark); border-color: var(--primary); }

    /* FOOTER */
    .site-footer { background: var(--dark); color: var(--primary); padding: 48px 0 24px; margin-top: 60px; border-top: 1px solid #333; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
    .footer-brand h3 { color: var(--cream); font-size: 18px; font-weight: 700; margin-bottom: 8px; }
    .footer-brand p { font-size: 13px; line-height: 1.7; }
    .footer-col h4 { color: var(--cream); font-size: 14px; font-weight: 700; margin-bottom: 14px; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .footer-col ul li a { font-size: 13px; color: var(--primary); transition: color 0.2s; display: inline-block; min-height: 44px; line-height: 44px; }
    .footer-col ul li a:hover { color: var(--cream); }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
    .footer-bottom a { color: var(--secondary); transition: color 0.2s; display: inline-block; min-height: 44px; line-height: 44px; }
    .footer-bottom a:hover { color: var(--cream); }
    /* BURGER MENU */
    .header-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
    .header-burger span { display: block; width: 24px; height: 2px; background: #FFF; border-radius: 2px; transition: all 0.3s; }
    .header-burger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .header-burger--open span:nth-child(2) { opacity: 0; }
    .header-burger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Animations (animate skill) */
    @keyframes enwan-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    .enwan-anim-up { animation: enwan-fade-up 0.5s var(--ease-out-quart) both; }
    .enwan-d1 { animation-delay: 100ms; }
    .enwan-d2 { animation-delay: 200ms; }

    /* Card interactions (animate + quieter skills) */
    .card { cursor: pointer; }
    .card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(166,148,131,0.12); border-color: var(--primary); }
    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(166,148,131,0.2); }
    .btn-primary:active { transform: translateY(0) scale(0.98); }

    /* Warm surfaces (colorize skill) */
    body { background: var(--surface, #FDFBF9); }
    .card { background: var(--pure-white); border-color: var(--cream-2); }
    .card:hover { border-color: var(--primary); }

    /* Focus (polish skill) */
    *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

    /* Reduced motion (polish skill) */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }

    /* Scroll-driven parallax (overdrive skill) */
    @supports (animation-timeline: scroll()) {
      .hero { view-timeline-name: --hero; }
      .hero::before {
        animation: hero-parallax-bg linear both;
        animation-timeline: scroll(nearest);
        animation-range: 0px 500px;
      }
      @keyframes hero-parallax-bg {
        from { transform: translateY(0) scale(1); opacity: 0.12; }
        to { transform: translateY(30px) scale(1.04); opacity: 0.04; }
      }
      .hero h1 {
        animation: hero-parallax-text linear both;
        animation-timeline: scroll(nearest);
        animation-range: 0px 400px;
      }
      @keyframes hero-parallax-text {
        from { transform: translateY(0); }
        to { transform: translateY(-16px); opacity: 0.7; }
      }
    }

    /* Category badge colors (normalize skill) */
    .cat-badge-designs { background: rgba(139,127,199,0.1); color: var(--cat-designs); border: 1px solid rgba(139,127,199,0.3); }
    .cat-badge-guide { background: rgba(90,157,173,0.1); color: var(--cat-guide); border: 1px solid rgba(90,157,173,0.3); }
    .cat-badge-tips { background: rgba(90,158,130,0.1); color: var(--cat-tips); border: 1px solid rgba(90,158,130,0.3); }
    .cat-badge-ideas { background: rgba(196,147,64,0.1); color: var(--cat-ideas); border: 1px solid rgba(196,147,64,0.3); }
    .cat-badge-tech { background: rgba(196,90,90,0.1); color: var(--cat-tech); border: 1px solid rgba(196,90,90,0.3); }

    /* Adapt skill: mobile fixes */
    @media (max-width: 767px) {
      .hero h1 { font-size: clamp(24px, 5vw, 36px); }
      .hero { padding: 50px 0 36px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .cat-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; }
      .cat-tabs::-webkit-scrollbar { display: none; }
    }
    @media (max-width: 767px) and (orientation: landscape) {
      .hero { padding: 30px 0 20px; }
    }

    @media (max-width: 768px) {
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .header-nav { display: none; position: absolute; top: 100%; right: 0; left: 0; background: #000; border-top: 1px solid #1F1F1F; flex-direction: column; padding: 16px 20px; gap: 0; }
      .header-nav--open { display: flex; }
      .header-nav a { padding: 14px 0; border-bottom: 1px solid #1F1F1F; font-size: 16px; }
      .header-nav a:last-child { border-bottom: none; }
      .header-nav .header-cta { margin-top: 12px; text-align: center; display: block; }
      .header-burger { display: flex; }
      .site-header .container { position: relative; }
      .hero { padding: 50px 0 36px; }
      .cta-banner { padding: 32px 20px; }
    }
    @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }