/* ══════════════════════════════════
       KEYFRAMES
    ══════════════════════════════════ */
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(32px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes floatGently {

        0%,
        100% {
            transform: translateY(0px) rotate(0deg);
        }

        33% {
            transform: translateY(-14px) rotate(1.5deg);
        }

        66% {
            transform: translateY(-6px) rotate(-1deg);
        }
    }

    @keyframes spinSlow {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @keyframes shimmer {
        0% {
            background-position: -200% center;
        }

        100% {
            background-position: 200% center;
        }
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 0.6;
            transform: scale(1);
        }

        50% {
            opacity: 1;
            transform: scale(1.04);
        }
    }

    @keyframes drawLine {
        from {
            stroke-dashoffset: 300;
        }

        to {
            stroke-dashoffset: 0;
        }
    }

    @keyframes blobMorph {

        0%,
        100% {
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        }

        50% {
            border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        }
    }

    @keyframes twinkle {

        0%,
        100% {
            opacity: 0.2;
            transform: scale(0.8);
        }

        50% {
            opacity: 1;
            transform: scale(1.2);
        }
    }

    @keyframes orbitDot {
        from {
            transform: rotate(0deg) translateX(60px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translateX(60px) rotate(-360deg);
        }
    }

    @keyframes countUp404 {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ══════════════════════════════════
       LAYOUT SHELL
    ══════════════════════════════════ */
    .page-404 {
        min-height: 100vh;
        display: grid;
        grid-template-rows: auto 1fr auto;
        position: relative;
    }

    /* ── Background layers ── */
    .bg-layer {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
    }

    /* Dot pattern */
    .bg-dots {
        background-image: radial-gradient(circle at 1px 1px, rgba(200, 151, 58, 0.10) 1px, transparent 0);
        background-size: 32px 32px;
    }

    /* Radial glow emerald top-left */
    .bg-glow-tl {
        background: radial-gradient(ellipse 60% 50% at 0% 0%, rgba(26, 92, 71, 0.13) 0%, transparent 70%);
    }

    /* Radial glow gold bottom-right */
    .bg-glow-br {
        background: radial-gradient(ellipse 55% 45% at 100% 100%, rgba(200, 151, 58, 0.12) 0%, transparent 70%);
    }

    /* Decorative large "404" watermark */
    .bg-watermark {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: var(--font-display);
        font-size: clamp(180px, 30vw, 380px);
        font-weight: 700;
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(200, 151, 58, 0.07);
        white-space: nowrap;
        user-select: none;
        pointer-events: none;
        z-index: 0;
        letter-spacing: -0.04em;
    }

    /* Floating blobs */
    .blob {
        position: fixed;
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        filter: blur(60px);
        pointer-events: none;
        z-index: 0;
        animation: blobMorph 8s ease-in-out infinite;
    }

    .blob-1 {
        width: 380px;
        height: 380px;
        top: -80px;
        left: -120px;
        background: rgba(26, 92, 71, 0.07);
        animation-delay: 0s;
    }

    .blob-2 {
        width: 300px;
        height: 300px;
        bottom: -60px;
        right: -80px;
        background: rgba(200, 151, 58, 0.09);
        animation-delay: 3s;
    }

    .blob-3 {
        width: 200px;
        height: 200px;
        top: 40%;
        right: 15%;
        background: rgba(61, 153, 112, 0.06);
        animation-delay: 5s;
    }

    
    /* ══════════════════════════════════
       MAIN CONTENT
    ══════════════════════════════════ */
    .error-main {
        position: relative;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding:20px 5%;
        text-align: center;
    }

    /* Decorative compass/ornament SVG */
    .hero-ornament {
        position: relative;
        width: 160px;
        height: 160px;
        margin: 0 auto 40px;
        animation: floatGently 6s ease-in-out infinite;
    }

    .hero-ornament .orbit-ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1.5px dashed rgba(200, 151, 58, 0.35);
        animation: spinSlow 18s linear infinite;
    }

    .hero-ornament .orbit-dot {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        background: var(--gold);
        border-radius: 50%;
        animation: orbitDot 18s linear infinite;
        box-shadow: 0 0 8px rgba(200, 151, 58, 0.6);
    }

    .hero-ornament .inner-circle {
        position: absolute;
        inset: 24px;
        background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-mid) 60%, var(--emerald-light) 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 32px rgba(26, 92, 71, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .hero-ornament .inner-icon {
        font-size: 3rem;
        line-height: 1;
    }

    /* Star twinkles */
    .twinkles {
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .twinkle-dot {
        position: absolute;
        width: 5px;
        height: 5px;
        background: var(--gold);
        border-radius: 50%;
        animation: twinkle 2.5s ease-in-out infinite;
    }

    /* ── 404 Number ── */
    .error-code {
        font-family: var(--font-display);
        font-size: clamp(5rem, 16vw, 10rem);
        font-weight: 700;
        line-height: 1;
        margin-bottom: 20px;
        background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-mid) 40%, var(--gold) 80%, var(--gold-light) 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: countUp404 0.9s ease both 0.2s, shimmer 4s linear infinite 1.2s;
        letter-spacing: -0.04em;
        position: relative;
    }

    .error-code::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--emerald), var(--gold));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: blur(22px);
        opacity: 0.22;
        pointer-events: none;
    }

    /* ── Divider ornament ── */
    .ornament-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin-bottom: 28px;
        animation: fadeUp 0.7s ease both 0.45s;
    }

    .ornament-row .line {
        height: 1px;
        width: 70px;
        background: linear-gradient(90deg, transparent, var(--gold));
    }

    .ornament-row .line.right {
        background: linear-gradient(270deg, transparent, var(--gold));
    }

    .ornament-row .diamond {
        width: 8px;
        height: 8px;
        background: var(--gold);
        transform: rotate(45deg);
    }

    /* Label */
    .error-label {
        display: inline-block;
        font-family: var(--font-body);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 18px;
        animation: fadeUp 0.7s ease both 0.35s;
    }

    /* Heading */
    .error-heading {
        font-family: var(--font-display);
        font-size: clamp(1.6rem, 4vw, 2.8rem);
        font-weight: 700;
        color: var(--emerald);
        line-height: 1.2;
        margin-bottom: 20px;
        animation: fadeUp 0.7s ease both 0.55s;
    }

    .error-heading em {
        font-style: italic;
        color: var(--gold);
    }

    /* Arabic inscription */
    .arabic-text {
        font-family: var(--font-arabic);
        font-size: 1.25rem;
        color: var(--muted);
        margin-bottom: 16px;
        direction: rtl;
        animation: fadeUp 0.7s ease both 0.65s;
        opacity: 0.8;
    }

    /* Description */
    .error-desc {
        max-width: 520px;
        margin: 0 auto 40px;
        font-family: var(--font-body);
        font-size: 1.05rem;
        color: var(--muted);
        line-height: 1.85;
        animation: fadeUp 0.7s ease both 0.7s;
    }

    /* ── CTA Buttons ── */
    .cta-group {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
        animation: fadeUp 0.7s ease both 0.85s;
        margin-bottom: 64px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 32px;
        border-radius: 50px;
        font-family: var(--font-body);
        font-size: 0.88rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        cursor: pointer;
        border: none;
        transition: var(--transition);
        text-transform: uppercase;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--gold), var(--gold-light));
        color: var(--charcoal);
        box-shadow: 0 4px 20px rgba(200, 151, 58, 0.38);
    }

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 32px rgba(200, 151, 58, 0.55);
    }

    .btn-ghost {
        background: transparent;
        color: var(--emerald);
        border: 2px solid rgba(26, 92, 71, 0.4);
    }

    .btn-ghost:hover {
        background: rgba(26, 92, 71, 0.06);
        border-color: var(--emerald);
        transform: translateY(-2px);
    }

    .btn-icon {
        font-size: 1rem;
    }

    /* ── Suggestion Links ── */
    .suggestions {
        animation: fadeUp 0.7s ease both 1s;
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
    }

    .suggestions-title {
        font-family: var(--font-body);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 20px;
    }

    .suggestion-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 14px;
    }

    .suggestion-card {
        background: var(--white);
        border: 1.5px solid rgba(200, 151, 58, 0.18);
        border-radius: var(--radius-md);
        padding: 20px 18px;
        display: flex;
        align-items: center;
        gap: 14px;
        transition: var(--transition);
        cursor: pointer;
        text-align: left;
    }

    .suggestion-card:hover {
        border-color: var(--gold);
        box-shadow: 0 4px 20px rgba(200, 151, 58, 0.15);
        transform: translateY(-3px);
    }

    .sc-icon {
        width: 40px;
        height: 40px;
        background: var(--gold-pale);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .sc-body .sc-title {
        font-family: var(--font-body);
        font-weight: 700;
        font-size: 0.88rem;
        color: var(--emerald);
        line-height: 1.2;
    }

    .sc-body .sc-sub {
        font-size: 0.73rem;
        color: var(--muted);
        margin-top: 3px;
        line-height: 1.3;
    }

    /* ══════════════════════════════════
       FOOTER STRIP
    ══════════════════════════════════ */
    .error-footer {
        position: relative;
        z-index: 10;
        padding: 24px 5%;
        border-top: 1px solid rgba(200, 151, 58, 0.18);
        background: rgba(250, 246, 238, 0.85);
        backdrop-filter: blur(12px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        animation: fadeUp 0.7s ease both 1.1s;
    }

    .footer-copy {
        font-size: 0.78rem;
        color: var(--muted);
        letter-spacing: 0.04em;
    }

    .footer-copy strong {
        color: var(--emerald);
        font-weight: 700;
    }

    .footer-arabic {
        font-family: var(--font-arabic);
        font-size: 0.95rem;
        color: var(--gold);
        opacity: 0.75;
        direction: rtl;
    }

    /* ══════════════════════════════════
       DECORATIVE SVG PATHS
    ══════════════════════════════════ */
    .deco-svg {
        position: fixed;
        pointer-events: none;
        z-index: 1;
    }

    .deco-top-right {
        top: 0;
        right: 0;
        width: 260px;
        opacity: 0.18;
    }

    .deco-bottom-left {
        bottom: 0;
        left: 0;
        width: 220px;
        opacity: 0.15;
        transform: rotate(180deg);
    }

    /* ══════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════ */
    @media (max-width: 768px) {
        .logo-text .full {
            display: none;
        }

        .header-nav a {
            padding: 7px 14px;
            font-size: 0.76rem;
        }

        .hero-ornament {
            width: 120px;
            height: 120px;
        }

        .hero-ornament .inner-icon {
            font-size: 2.2rem;
        }

        .error-heading {
            font-size: 1.55rem;
        }

        .arabic-text {
            font-size: 1.05rem;
        }

        .suggestion-cards {
            grid-template-columns: 1fr 1fr;
        }

        .deco-top-right,
        .deco-bottom-left {
            width: 140px;
        }

        .bg-watermark {
            font-size: 140px;
        }
    }

    @media (max-width: 480px) {
        .suggestion-cards {
            grid-template-columns: 1fr;
        }

        .cta-group {
            flex-direction: column;
            align-items: stretch;
        }

        .btn {
            justify-content: center;
        }

        .error-footer {
            justify-content: center;
            text-align: center;
        }
    }