/* =========================================================
   ZHR NAJI — PROTECTION INTELLIGENCE
   MASTER SECURITY / VISUAL SYSTEM
   ========================================================= */

:root{
    /* =====================================================
       ZHR SIGNATURE — MATTE BRONZE / GOLD
       ===================================================== */

    --zhr-bronze-gold:#A9844A;
    --zhr-bronze-gold-light:#C7A96A;
    --zhr-bronze-gold-bright:#D8BC7A;
    --zhr-bronze-gold-deep:#72552F;
    --zhr-bronze-shadow:#4B3820;
    --zhr-gold-soft:#B99A60;
    --zhr-gold-pale:#E0CA91;
    --zhr-gold-dark:#5D431F;

    /* =====================================================
       BLACK / PIANO / DEPTH
       ===================================================== */

    --zhr-black:#020304;
    --zhr-black-soft:#050607;
    --zhr-black-deep:#010203;
    --zhr-piano:#080A0D;
    --zhr-piano-light:#0D1014;
    --zhr-piano-deep:#050608;
    --zhr-charcoal:#111417;
    --zhr-charcoal-light:#181C20;

    /* =====================================================
       NAVY
       ===================================================== */

    --zhr-navy-deep:#020711;
    --zhr-navy:#06101C;
    --zhr-navy-mid:#0A1725;
    --zhr-navy-light:#102235;
    --zhr-navy-bright:#153149;
    --zhr-navy-dark:#030B14;

    /* =====================================================
       ELECTRIC BLUE
       ===================================================== */

    --zhr-electric:#2388D8;
    --zhr-electric-light:#59B5FF;
    --zhr-electric-bright:#7AC7FF;
    --zhr-electric-deep:#0B4F8A;
    --zhr-electric-dark:#07345C;

    /* =====================================================
       WHITE / STEEL / INFORMATION
       ===================================================== */

    --zhr-white:#F4F5F3;
    --zhr-white-soft:#E4E6E4;
    --zhr-white-muted:#C9CDCC;
    --zhr-text:#D2D4D2;
    --zhr-text-soft:#A8ADAC;
    --zhr-muted:#777F82;
    --zhr-text-dark:#4F575A;

    --zhr-graphite:#15191D;
    --zhr-graphite-light:#20262C;
    --zhr-graphite-deep:#0C0F12;
    --zhr-steel:#667078;
    --zhr-steel-light:#8C969D;
    --zhr-steel-bright:#B1B8BC;
    --zhr-steel-dark:#3E474D;

    /* =====================================================
       GLASS
       ===================================================== */

    --zhr-glass:rgba(255,255,255,.045);
    --zhr-glass-soft:rgba(255,255,255,.028);
    --zhr-glass-dark:rgba(2,3,4,.72);
    --zhr-glass-deep:rgba(2,3,4,.88);
    --zhr-glass-navy:rgba(6,16,28,.62);
    --zhr-glass-navy-soft:rgba(6,16,28,.42);
    --zhr-glass-blue:rgba(35,136,216,.055);
    --zhr-glass-blue-strong:rgba(35,136,216,.11);
    --zhr-glass-bronze:rgba(169,132,74,.055);
    --zhr-glass-bronze-soft:rgba(169,132,74,.035);
    --zhr-glass-black:rgba(0,0,0,.55);
    --zhr-glass-white:rgba(255,255,255,.065);

    /* =====================================================
       STATE COLORS
       ===================================================== */

    --zhr-red:#C63B32;
    --zhr-red-light:#F06A5F;
    --zhr-red-bright:#FF8176;
    --zhr-red-deep:#7A211D;
    --zhr-red-dark:#4A1512;
    --zhr-red-glass:rgba(198,59,50,.10);
    --zhr-red-line:rgba(198,59,50,.28);

    --zhr-yellow:#D6A52E;
    --zhr-yellow-light:#F0C75E;
    --zhr-yellow-bright:#FFD978;
    --zhr-yellow-deep:#8A6818;
    --zhr-yellow-dark:#55400E;
    --zhr-yellow-glass:rgba(214,165,46,.10);
    --zhr-yellow-line:rgba(214,165,46,.28);

    --zhr-green:#4D9A68;
    --zhr-green-light:#72C58D;
    --zhr-green-bright:#91D9A8;
    --zhr-green-deep:#285A3B;
    --zhr-green-dark:#173D27;
    --zhr-green-glass:rgba(77,154,104,.10);
    --zhr-green-line:rgba(77,154,104,.28);

    --zhr-blue:#2F78B7;
    --zhr-blue-light:#62B5F5;
    --zhr-blue-bright:#82C9FF;
    --zhr-blue-deep:#17466F;
    --zhr-blue-dark:#0E2C47;
    --zhr-blue-glass:rgba(47,120,183,.10);
    --zhr-blue-line:rgba(47,120,183,.28);

    --zhr-brown:#6B4932;
    --zhr-brown-light:#967054;
    --zhr-brown-bright:#B08A68;
    --zhr-brown-deep:#3D281C;
    --zhr-brown-dark:#241810;
    --zhr-brown-glass:rgba(107,73,50,.10);
    --zhr-brown-line:rgba(107,73,50,.28);

    /* =====================================================
       LINES / GLOWS
       ===================================================== */

    --zhr-line-dark:rgba(255,255,255,.055);
    --zhr-line:rgba(169,132,74,.16);
    --zhr-line-bright:rgba(199,169,106,.30);
    --zhr-line-blue:rgba(35,136,216,.22);
    --zhr-line-white:rgba(255,255,255,.12);
    --zhr-line-steel:rgba(140,150,157,.20);
    --zhr-line-red:rgba(198,59,50,.28);
    --zhr-line-yellow:rgba(214,165,46,.28);
    --zhr-line-green:rgba(77,154,104,.28);
    --zhr-line-brown:rgba(107,73,50,.28);

    --zhr-glow-bronze:rgba(169,132,74,.12);
    --zhr-glow-bronze-soft:rgba(169,132,74,.055);
    --zhr-glow-blue:rgba(35,136,216,.13);
    --zhr-glow-blue-soft:rgba(35,136,216,.06);
    --zhr-glow-red:rgba(198,59,50,.10);
    --zhr-glow-yellow:rgba(214,165,46,.09);
    --zhr-glow-green:rgba(77,154,104,.09);

    --zhr-shadow-deep:0 35px 90px rgba(0,0,0,.58);
    --zhr-shadow-card:0 24px 65px rgba(0,0,0,.46);
    --zhr-shadow-soft:0 16px 45px rgba(0,0,0,.32);
    --zhr-shadow-bronze:0 0 55px rgba(169,132,74,.10);
    --zhr-shadow-blue:0 0 45px rgba(35,136,216,.12);
    --zhr-shadow-red:0 0 45px rgba(198,59,50,.10);
    --zhr-shadow-green:0 0 45px rgba(77,154,104,.10);

    /* =====================================================
       GEOMETRY
       ===================================================== */

    --zhr-radius-sm:12px;
    --zhr-radius-md:20px;
    --zhr-radius-lg:28px;
    --zhr-radius-xl:36px;

    --zhr-max-width:1420px;
    --zhr-content-width:1180px;

    --zhr-ease:cubic-bezier(.22,.61,.36,1);
    --zhr-ease-soft:cubic-bezier(.16,1,.3,1);

    --zhr-transition:.55s var(--zhr-ease);
    --zhr-transition-slow:.9s var(--zhr-ease-soft);
}


/* =========================================================
   BASE
   ========================================================= */

html{
    scroll-behavior:smooth;
    background:var(--zhr-black-deep);
}

body{
    margin:0;
    background:
        radial-gradient(circle at 50% 0%,rgba(35,136,216,.045),transparent 30%),
        radial-gradient(circle at 15% 30%,rgba(169,132,74,.035),transparent 28%),
        var(--zhr-black-deep);
    color:var(--zhr-text);
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
    line-height:1.7;
    overflow-x:hidden;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

::selection{
    background:var(--zhr-bronze-gold);
    color:#080705;
}

img{
    display:block;
    max-width:100%;
}


/* =========================================================
   MAIN
   ========================================================= */

.zhr-naji-main{
    position:relative;
    isolation:isolate;
    background:
        linear-gradient(
            180deg,
            var(--zhr-black-deep) 0%,
            var(--zhr-navy-deep) 22%,
            var(--zhr-black) 52%,
            var(--zhr-navy-deep) 76%,
            var(--zhr-black-deep) 100%
        );
}

.zhr-naji-section{
    position:relative;
    padding:120px 24px;
    overflow:hidden;
}

.zhr-naji-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(169,132,74,.025),
            transparent
        );
}

.zhr-naji-section-container{
    position:relative;
    z-index:2;
    width:min(100%,var(--zhr-max-width));
    margin-inline:auto;
}

.zhr-naji-section-heading{
    max-width:850px;
    margin:0 auto 70px;
    text-align:center;
}

.zhr-naji-section-kicker{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    color:var(--zhr-bronze-gold-light);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.28em;
    text-transform:uppercase;
}

.zhr-naji-section-kicker::before,
.zhr-naji-section-kicker::after{
    content:"";
    width:28px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--zhr-bronze-gold)
    );
}

.zhr-naji-section-kicker::after{
    background:linear-gradient(
        90deg,
        var(--zhr-bronze-gold),
        transparent
    );
}

.zhr-naji-section-heading h2{
    margin:0;
    color:var(--zhr-white);
    font-size:clamp(2rem,4vw,4rem);
    line-height:1.05;
    letter-spacing:-.035em;
}

.zhr-naji-section-heading-fa{
    margin:20px 0 0;
    color:var(--zhr-gold-pale);
    direction:rtl;
    font-size:clamp(1rem,2vw,1.35rem);
    line-height:2;
}


/* =========================================================
   UNIVERSAL CONTENT ELEMENTS
   ========================================================= */

.zhr-naji-fa,
.zhr-naji-highlight-fa,
.zhr-naji-sacred-persian,
.zhr-naji-sacred-subtitle-fa,
.zhr-naji-final-title-fa{
    direction:rtl;
    text-align:right;
}

.zhr-naji-highlight{
    color:var(--zhr-bronze-gold-bright);
}

.zhr-naji-highlight-fa{
    color:var(--zhr-gold-pale);
}

.zhr-naji-section-closing{
    margin:70px auto 0;
    max-width:900px;
    text-align:center;
    color:var(--zhr-white-soft);
    font-size:1.1rem;
}

.zhr-naji-section-closing-fa{
    margin:16px auto 0;
    max-width:900px;
    text-align:center;
    direction:rtl;
    color:var(--zhr-gold-pale);
    font-size:1rem;
}


/* =========================================================
   MEDIA SLOTS
   ========================================================= */

.zhr-naji-media-slot{
    position:relative;
    min-height:300px;
    overflow:hidden;
    border:1px solid var(--zhr-line);
    border-radius:var(--zhr-radius-lg);
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(35,136,216,.10),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            rgba(169,132,74,.10),
            rgba(6,16,28,.86) 45%,
            rgba(2,3,4,.98)
        );
    box-shadow:
        var(--zhr-shadow-card),
        inset 0 0 0 1px rgba(255,255,255,.025);
}

.zhr-naji-media-slot::before{
    content:"";
    position:absolute;
    inset:12px;
    border:1px solid rgba(199,169,106,.16);
    border-radius:calc(var(--zhr-radius-lg) - 8px);
    pointer-events:none;
}

.zhr-naji-media-slot::after{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border:1px solid rgba(35,136,216,.28);
    border-radius:50%;
    box-shadow:
        0 0 0 18px rgba(35,136,216,.025),
        0 0 55px rgba(35,136,216,.10);
    pointer-events:none;
}

.zhr-naji-media-slot img{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    min-height:300px;
    object-fit:cover;
}


/* =========================================================
   HERO
   ========================================================= */

.zhr-naji-hero{
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 75% 42%,
            rgba(35,136,216,.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 20%,
            rgba(169,132,74,.11),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #010203 0%,
            #030B14 45%,
            #020304 100%
        );
}

.zhr-naji-hero-background{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(2,3,4,.96) 0%,
            rgba(2,3,4,.80) 40%,
            rgba(2,3,4,.25) 75%,
            rgba(2,3,4,.78) 100%
        );
}

.zhr-naji-hero-grid{
    position:absolute;
    inset:0;
    opacity:.32;
    background-image:
        linear-gradient(
            rgba(169,132,74,.075) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(35,136,216,.065) 1px,
            transparent 1px
        );
    background-size:70px 70px;
    mask-image:linear-gradient(
        90deg,
        black,
        transparent 90%
    );
}

.zhr-naji-hero-scan{
    position:absolute;
    width:680px;
    height:680px;
    right:-180px;
    top:50%;
    transform:translateY(-50%);
    border:1px solid rgba(35,136,216,.18);
    border-radius:50%;
    box-shadow:
        0 0 0 40px rgba(35,136,216,.025),
        0 0 0 100px rgba(169,132,74,.018),
        0 0 100px rgba(35,136,216,.12);
    animation:zhr-naji-scan-pulse 6s ease-in-out infinite;
}

.zhr-naji-hero-scan::before,
.zhr-naji-hero-scan::after{
    content:"";
    position:absolute;
    inset:12%;
    border:1px solid rgba(169,132,74,.20);
    border-radius:50%;
}

.zhr-naji-hero-scan::after{
    inset:28%;
    border-color:rgba(35,136,216,.25);
}

.zhr-naji-hero-container{
    position:relative;
    z-index:5;
    width:min(100%,var(--zhr-max-width));
    margin:auto;
    padding:130px 32px 120px;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
    align-items:center;
    gap:70px;
}

.zhr-naji-hero-copy{
    max-width:780px;
}

.zhr-naji-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:24px;
    color:var(--zhr-bronze-gold-bright);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.30em;
    text-transform:uppercase;
}

.zhr-naji-eyebrow::before{
    content:"";
    width:42px;
    height:1px;
    background:var(--zhr-bronze-gold);
    box-shadow:0 0 18px var(--zhr-glow-bronze);
}

.zhr-naji-hero-title{
    margin:0;
    color:var(--zhr-white);
    font-size:clamp(3.2rem,7vw,7rem);
    line-height:.92;
    letter-spacing:-.055em;
    max-width:850px;
    text-shadow:0 20px 60px rgba(0,0,0,.5);
}

.zhr-naji-hero-title::first-line{
    color:var(--zhr-white);
}

.zhr-naji-hero-title-fa{
    margin:30px 0 0;
    color:var(--zhr-gold-pale);
    font-size:clamp(1.25rem,2.5vw,2rem);
    line-height:1.8;
    direction:rtl;
    text-align:left;
}

.zhr-naji-hero-description{
    max-width:720px;
    margin:28px 0 0;
    color:var(--zhr-text-soft);
    font-size:1.05rem;
    line-height:1.9;
}

.zhr-naji-hero-description-fa{
    max-width:720px;
    margin:14px 0 0;
    color:var(--zhr-white-muted);
    direction:rtl;
    text-align:left;
    line-height:2;
}

.zhr-naji-hero-status{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:32px;
}

.zhr-naji-status-point{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:10px 15px;
    border:1px solid rgba(169,132,74,.25);
    border-radius:999px;
    background:rgba(6,16,28,.58);
    color:var(--zhr-white-soft);
    font-size:.76rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    backdrop-filter:blur(14px);
}

.zhr-naji-status-point::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--zhr-green);
    box-shadow:0 0 14px rgba(77,154,104,.65);
}

.zhr-naji-hero-media{
    min-height:500px;
    border-color:rgba(169,132,74,.28);
    box-shadow:
        var(--zhr-shadow-deep),
        0 0 90px rgba(35,136,216,.10),
        inset 0 0 50px rgba(169,132,74,.05);
}

.zhr-naji-hero-bottom{
    position:absolute;
    z-index:8;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);
    width:min(calc(100% - 48px),1000px);
    display:grid;
    grid-template-columns:repeat(6,1fr);
    border:1px solid rgba(169,132,74,.20);
    background:rgba(2,3,4,.72);
    backdrop-filter:blur(18px);
}

.zhr-naji-hero-bottom > *{
    position:relative;
    padding:14px 10px;
    text-align:center;
    color:var(--zhr-text-soft);
    font-size:.65rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.zhr-naji-hero-bottom > * + *::before{
    content:"";
    position:absolute;
    left:0;
    top:30%;
    width:1px;
    height:40%;
    background:var(--zhr-line);
}

.zhr-naji-hero-bottom > *:nth-child(1),
.zhr-naji-hero-bottom > *:nth-child(2){
    color:var(--zhr-electric-light);
}

.zhr-naji-hero-bottom > *:nth-child(3){
    color:var(--zhr-yellow-light);
}

.zhr-naji-hero-bottom > *:nth-child(4){
    color:var(--zhr-bronze-gold-bright);
}

.zhr-naji-hero-bottom > *:nth-child(5){
    color:var(--zhr-red-light);
}

.zhr-naji-hero-bottom > *:nth-child(6){
    color:var(--zhr-green-light);
}


/* =========================================================
   PHILOSOPHY
   ========================================================= */

.zhr-naji-philosophy{
    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(169,132,74,.09),
            transparent 35%
        ),
        var(--zhr-black);
}

.zhr-naji-philosophy-layout{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:80px;
    align-items:center;
}

.zhr-naji-philosophy-copy{
    max-width:680px;
}

.zhr-naji-philosophy-copy h3{
    margin:0 0 24px;
    color:var(--zhr-white);
    font-size:clamp(2rem,4vw,3.6rem);
    line-height:1.05;
}

.zhr-naji-philosophy-copy p{
    color:var(--zhr-text-soft);
    font-size:1.05rem;
}

.zhr-naji-principle-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-top:38px;
}

.zhr-naji-principle{
    position:relative;
    padding:22px;
    border:1px solid var(--zhr-line);
    border-radius:var(--zhr-radius-md);
    background:
        linear-gradient(
            145deg,
            rgba(169,132,74,.11),
            rgba(6,16,28,.64)
        );
    box-shadow:var(--zhr-shadow-soft);
    transition:var(--zhr-transition);
}

.zhr-naji-principle:hover{
    transform:translateY(-5px);
    border-color:var(--zhr-line-bright);
    box-shadow:var(--zhr-shadow-bronze);
}

.zhr-naji-principle strong{
    display:block;
    color:var(--zhr-bronze-gold-bright);
    font-size:.78rem;
    letter-spacing:.18em;
}

.zhr-naji-principle span{
    display:block;
    margin-top:7px;
    color:var(--zhr-text-soft);
}

.zhr-naji-philosophy-mission{
    padding:44px;
    border:1px solid rgba(169,132,74,.28);
    border-radius:var(--zhr-radius-xl);
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(169,132,74,.14),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(169,132,74,.10),
            rgba(5,6,8,.90)
        );
    box-shadow:
        var(--zhr-shadow-card),
        inset 0 0 45px rgba(169,132,74,.04);
}

.zhr-naji-mission-label{
    color:var(--zhr-bronze-gold);
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.25em;
    text-transform:uppercase;
}

.zhr-naji-philosophy-mission h3{
    margin:20px 0 12px;
    color:var(--zhr-white);
    font-size:2rem;
}

.zhr-naji-philosophy-mission p{
    margin:0;
    color:var(--zhr-text-soft);
}


/* =========================================================
   SACRED / FIRST MESSAGE
   ========================================================= */

.zhr-naji-first-message{
    padding-top:145px;
    padding-bottom:145px;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(169,132,74,.13),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #050403,
            #0A0805,
            #020304
        );
}

.zhr-naji-sacred-frame{
    position:relative;
    max-width:1050px;
    margin:auto;
    padding:70px;
    border:1px solid rgba(199,169,106,.42);
    border-radius:var(--zhr-radius-xl);
    background:
        linear-gradient(
            145deg,
            rgba(169,132,74,.13),
            rgba(5,6,8,.90) 50%,
            rgba(114,85,47,.08)
        );
    box-shadow:
        0 40px 120px rgba(0,0,0,.65),
        0 0 90px rgba(169,132,74,.08),
        inset 0 0 60px rgba(169,132,74,.045);
}

.zhr-naji-sacred-frame::before,
.zhr-naji-sacred-frame::after{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    pointer-events:none;
}

.zhr-naji-sacred-frame::before{
    top:18px;
    left:18px;
    border-top:1px solid var(--zhr-bronze-gold-bright);
    border-left:1px solid var(--zhr-bronze-gold-bright);
}

.zhr-naji-sacred-frame::after{
    right:18px;
    bottom:18px;
    border-right:1px solid var(--zhr-bronze-gold-bright);
    border-bottom:1px solid var(--zhr-bronze-gold-bright);
}

.zhr-naji-sacred-subtitle{
    margin:0;
    color:var(--zhr-bronze-gold-bright);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.30em;
    text-align:center;
}

.zhr-naji-sacred-subtitle-fa{
    margin:14px 0 45px;
    color:var(--zhr-gold-pale);
    text-align:center;
}

.zhr-naji-sacred-message{
    text-align:center;
}

.zhr-naji-sacred-english{
    max-width:850px;
    margin:auto;
    color:var(--zhr-white-soft);
    font-size:clamp(1.1rem,2vw,1.5rem);
    line-height:2;
}

.zhr-naji-sacred-persian{
    max-width:850px;
    margin:38px auto 0;
    color:var(--zhr-white-muted);
    font-size:1.05rem;
    line-height:2.4;
}

.zhr-naji-sacred-strong{
    display:block;
    margin:18px 0;
    color:var(--zhr-gold-pale);
    font-size:clamp(1.5rem,3vw,2.5rem);
    font-weight:800;
    letter-spacing:.04em;
}

.zhr-naji-sacred-transition{
    margin:42px auto;
    width:80px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--zhr-bronze-gold-bright),
        transparent
    );
}


/* =========================================================
   PURPOSE
   ========================================================= */

.zhr-naji-purpose{
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(35,136,216,.10),
            transparent 32%
        ),
        var(--zhr-navy-deep);
}

.zhr-naji-purpose-intro{
    max-width:800px;
    margin:0 auto 55px;
    text-align:center;
}

.zhr-naji-purpose-intro p,
.zhr-naji-purpose-human p{
    color:var(--zhr-text-soft);
}

.zhr-naji-purpose-human{
    margin:45px auto;
    max-width:900px;
    padding:30px;
    border-left:2px solid var(--zhr-electric);
    background:linear-gradient(
        90deg,
        rgba(35,136,216,.08),
        transparent
    );
}

.zhr-naji-human-groups{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:28px;
}

.zhr-naji-human-groups span{
    padding:10px 17px;
    border:1px solid var(--zhr-line-blue);
    border-radius:999px;
    color:var(--zhr-electric-light);
    background:var(--zhr-glass-blue);
}

.zhr-naji-mission-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.zhr-naji-mission-card{
    position:relative;
    min-height:240px;
    padding:34px;
    border:1px solid rgba(35,136,216,.20);
    border-radius:var(--zhr-radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(35,136,216,.11),
            rgba(6,16,28,.75) 55%,
            rgba(169,132,74,.045)
        );
    box-shadow:var(--zhr-shadow-card);
    transition:var(--zhr-transition);
}

.zhr-naji-mission-card::before{
    content:"";
    position:absolute;
    top:0;
    left:28px;
    right:28px;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--zhr-electric),
        transparent
    );
}

.zhr-naji-mission-card:hover{
    transform:translateY(-8px);
    border-color:rgba(89,181,255,.40);
    box-shadow:var(--zhr-shadow-blue);
}

.zhr-naji-mission-card h3{
    margin:0 0 15px;
    color:var(--zhr-white);
}

.zhr-naji-mission-card p{
    margin:0;
    color:var(--zhr-text-soft);
}

.zhr-naji-prevention-message,
.zhr-naji-responsibility-note{
    margin:38px auto 0;
    max-width:900px;
    padding:25px 30px;
    border:1px solid var(--zhr-line);
    border-radius:var(--zhr-radius-md);
    background:var(--zhr-glass-bronze);
    color:var(--zhr-white-soft);
}

.zhr-naji-emergency-actions{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:30px;
}

.zhr-naji-emergency-actions > *{
    padding:18px;
    border:1px solid var(--zhr-line-red);
    background:var(--zhr-red-glass);
    border-radius:var(--zhr-radius-md);
    color:var(--zhr-red-light);
}

.zhr-naji-rose-link{
    display:inline-block;
    margin-top:30px;
    color:var(--zhr-electric-light);
    text-decoration:none;
}


/* =========================================================
   ARCHITECTURE
   ========================================================= */

.zhr-naji-architecture{
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(35,136,216,.10),
            transparent 38%
        ),
        var(--zhr-black);
}

.zhr-naji-system-flow{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:60px;
}

.zhr-naji-system-flow span,
.zhr-naji-system-flow b{
    padding:13px 18px;
    border:1px solid var(--zhr-line-blue);
    border-radius:999px;
    background:var(--zhr-glass-blue);
    color:var(--zhr-electric-light);
    font-size:.76rem;
    letter-spacing:.08em;
}

.zhr-naji-system-flow b{
    border:none;
    background:none;
    color:var(--zhr-bronze-gold-bright);
}

.zhr-naji-layer-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.zhr-naji-layer-grid article{
    min-height:190px;
    padding:27px;
    border:1px solid rgba(35,136,216,.17);
    border-radius:var(--zhr-radius-md);
    background:
        linear-gradient(
            145deg,
            rgba(35,136,216,.09),
            rgba(6,16,28,.75)
        );
    box-shadow:var(--zhr-shadow-soft);
    transition:var(--zhr-transition);
}

.zhr-naji-layer-grid article:hover{
    transform:translateY(-5px);
    border-color:var(--zhr-line-blue);
    box-shadow:var(--zhr-shadow-blue);
}

.zhr-naji-layer-grid h3{
    color:var(--zhr-white);
}

.zhr-naji-layer-grid p{
    color:var(--zhr-text-soft);
}

.zhr-naji-architecture-trinity{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:55px;
}

.zhr-naji-architecture-trinity > div{
    padding:30px;
    border:1px solid var(--zhr-line);
    border-radius:var(--zhr-radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(169,132,74,.08),
            rgba(6,16,28,.72)
        );
    text-align:center;
    box-shadow:var(--zhr-shadow-card);
}

.zhr-naji-architecture-trinity > div:nth-child(2){
    border-color:var(--zhr-line-blue);
}

.zhr-naji-architecture-trinity strong{
    display:block;
    color:var(--zhr-bronze-gold-bright);
    font-size:1.2rem;
}

.zhr-naji-architecture-trinity > div:nth-child(2) strong{
    color:var(--zhr-electric-light);
}

.zhr-naji-architecture-principles{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:28px;
}

.zhr-naji-architecture-principles article{
    padding:25px;
    border-top:2px solid var(--zhr-electric);
    background:var(--zhr-glass-blue);
}


/* =========================================================
   HUMAN PROTECTION
   ========================================================= */

.zhr-naji-human-protection{
    background:
        radial-gradient(
            circle at 15% 45%,
            rgba(77,154,104,.08),
            transparent 30%
        ),
        var(--zhr-black);
}

.zhr-naji-heading-line,
.zhr-naji-heading-line-fa{
    text-align:center;
}

.zhr-naji-heading-line{
    color:var(--zhr-green-light);
    font-size:clamp(1.8rem,4vw,3.4rem);
}

.zhr-naji-heading-line-fa{
    color:var(--zhr-gold-pale);
    direction:rtl;
}

.zhr-naji-human-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:55px;
}

.zhr-naji-human-grid article{
    position:relative;
    padding:32px;
    min-height:210px;
    border:1px solid var(--zhr-line-green);
    border-radius:var(--zhr-radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(77,154,104,.09),
            rgba(6,16,28,.76)
        );
    box-shadow:var(--zhr-shadow-card);
    transition:var(--zhr-transition);
}

.zhr-naji-human-grid article:hover{
    transform:translateY(-6px);
    box-shadow:var(--zhr-shadow-green);
}

.zhr-naji-human-grid h3{
    color:var(--zhr-white);
}

.zhr-naji-human-grid p{
    color:var(--zhr-text-soft);
}

.zhr-naji-dignity-message{
    max-width:900px;
    margin:50px auto 0;
    text-align:center;
    color:var(--zhr-green-light);
    font-size:1.15rem;
}


/* =========================================================
   INTELLIGENT SAFETY
   ========================================================= */

.zhr-naji-intelligent-safety{
    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(35,136,216,.11),
            transparent 35%
        ),
        var(--zhr-navy-deep);
}

.zhr-naji-intelligence-intro{
    max-width:800px;
    margin:0 auto 45px;
    text-align:center;
    color:var(--zhr-text-soft);
}

.zhr-naji-intelligence-principles{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:45px;
}

.zhr-naji-intelligence-principles span{
    padding:11px 18px;
    border:1px solid var(--zhr-line-blue);
    border-radius:999px;
    color:var(--zhr-electric-light);
    background:var(--zhr-glass-blue);
}

.zhr-naji-intelligence-content{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.zhr-naji-intelligence-content article{
    padding:34px;
    border:1px solid rgba(35,136,216,.20);
    border-radius:var(--zhr-radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(35,136,216,.10),
            rgba(2,7,17,.85)
        );
    box-shadow:var(--zhr-shadow-card);
}

.zhr-naji-intelligence-content h3{
    color:var(--zhr-white);
}

.zhr-naji-intelligence-content p{
    color:var(--zhr-text-soft);
}

.zhr-naji-intelligence-closing{
    max-width:850px;
    margin:50px auto 0;
    text-align:center;
    color:var(--zhr-electric-light);
}


/* =========================================================
   EMERGENCY
   ========================================================= */

.zhr-naji-emergency{
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(198,59,50,.08),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #080303,
            #030304
        );
}

.zhr-naji-emergency-journey{
    position:relative;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:12px;
    margin-bottom:55px;
}

.zhr-naji-emergency-journey::before{
    content:"";
    position:absolute;
    left:5%;
    right:5%;
    top:42px;
    height:1px;
    background:linear-gradient(
        90deg,
        var(--zhr-electric),
        var(--zhr-yellow),
        var(--zhr-red),
        var(--zhr-green)
    );
    opacity:.55;
}

.zhr-naji-emergency-step{
    position:relative;
    z-index:2;
    padding:20px 10px;
    text-align:center;
    border:1px solid rgba(198,59,50,.20);
    border-radius:var(--zhr-radius-md);
    background:rgba(12,5,5,.86);
}

.zhr-naji-emergency-step strong{
    display:block;
    margin-bottom:5px;
    color:var(--zhr-red-light);
    font-size:.75rem;
    letter-spacing:.14em;
}

.zhr-naji-emergency-step span{
    display:block;
    color:var(--zhr-white-soft);
}

.zhr-naji-emergency-step small{
    color:var(--zhr-text-soft);
}

.zhr-naji-emergency-step:nth-child(1),
.zhr-naji-emergency-step:nth-child(2){
    border-color:var(--zhr-line-blue);
}

.zhr-naji-emergency-step:nth-child(1) strong,
.zhr-naji-emergency-step:nth-child(2) strong{
    color:var(--zhr-electric-light);
}

.zhr-naji-emergency-step:nth-child(3){
    border-color:var(--zhr-line-yellow);
}

.zhr-naji-emergency-step:nth-child(3) strong{
    color:var(--zhr-yellow-light);
}

.zhr-naji-emergency-step:nth-child(6){
    border-color:var(--zhr-line-green);
}

.zhr-naji-emergency-step:nth-child(6) strong{
    color:var(--zhr-green-light);
}

.zhr-naji-emergency-content{
    max-width:900px;
    margin:auto;
    padding:40px;
    border:1px solid var(--zhr-line-red);
    border-radius:var(--zhr-radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(198,59,50,.09),
            rgba(15,5,5,.80)
        );
    box-shadow:var(--zhr-shadow-red);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.zhr-naji-accessibility{
    background:var(--zhr-navy-deep);
}

.zhr-naji-accessibility-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.zhr-naji-accessibility-grid article{
    padding:30px;
    border:1px solid var(--zhr-line-blue);
    border-radius:var(--zhr-radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(47,120,183,.09),
            rgba(6,16,28,.78)
        );
    box-shadow:var(--zhr-shadow-card);
}

.zhr-naji-accessibility-grid article:nth-child(2n){
    border-color:var(--zhr-line-green);
    background:
        linear-gradient(
            145deg,
            rgba(77,154,104,.075),
            rgba(6,16,28,.78)
        );
}

.zhr-naji-accessibility-grid h3{
    color:var(--zhr-white);
}

.zhr-naji-accessibility-grid p{
    color:var(--zhr-text-soft);
}

.zhr-naji-accessibility-closing{
    margin:45px auto 0;
    max-width:850px;
    text-align:center;
    color:var(--zhr-green-light);
}


/* =========================================================
   LIVING PROTECTION ECOSYSTEM
   ========================================================= */

.zhr-naji-circle{
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(169,132,74,.09),
            transparent 40%
        ),
        var(--zhr-black);
}

.zhr-naji-evolution-cycle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    margin:50px auto;
    max-width:1000px;
}

.zhr-naji-evolution-cycle > *{
    position:relative;
    flex:1;
    padding:25px 15px;
    text-align:center;
    border:1px solid var(--zhr-line);
    background:var(--zhr-glass-bronze);
}

.zhr-naji-evolution-cycle > * + *{
    margin-left:-1px;
}

.zhr-naji-version-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.zhr-naji-version-grid article{
    padding:28px;
    border:1px solid var(--zhr-line);
    border-radius:var(--zhr-radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(169,132,74,.075),
            rgba(6,16,28,.78)
        );
    box-shadow:var(--zhr-shadow-soft);
}

.zhr-naji-version-grid article h3{
    color:var(--zhr-bronze-gold-bright);
}

.zhr-naji-evolution-content{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    margin-top:25px;
}

.zhr-naji-evolution-content article{
    padding:35px;
    border:1px solid var(--zhr-line-blue);
    border-radius:var(--zhr-radius-lg);
    background:var(--zhr-glass-blue);
}

.zhr-naji-feedback-loop{
    margin:35px auto;
    max-width:900px;
    padding:28px;
    border:1px solid var(--zhr-line-green);
    border-radius:var(--zhr-radius-lg);
    background:var(--zhr-green-glass);
    text-align:center;
}

.zhr-naji-evolution-principles{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.zhr-naji-evolution-principles > *{
    padding:10px 17px;
    border-radius:999px;
    border:1px solid var(--zhr-line);
    background:var(--zhr-glass-bronze);
}

.zhr-naji-ota,
.zhr-naji-long-term,
.zhr-naji-future-capabilities{
    margin-top:25px;
    padding:30px;
    border:1px solid var(--zhr-line-blue);
    border-radius:var(--zhr-radius-lg);
    background:var(--zhr-glass-navy);
}

.zhr-naji-circle-closing{
    max-width:900px;
    margin:50px auto 0;
    text-align:center;
    color:var(--zhr-bronze-gold-bright);
}


/* =========================================================
   PREVENTION
   ========================================================= */

.zhr-naji-prevention{
    background:
        radial-gradient(
            circle at 25% 40%,
            rgba(214,165,46,.08),
            transparent 32%
        ),
        var(--zhr-black);
}

.zhr-naji-prevention-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.zhr-naji-prevention-grid article{
    padding:30px;
    border:1px solid var(--zhr-line-yellow);
    border-radius:var(--zhr-radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(214,165,46,.08),
            rgba(20,15,5,.80)
        );
    box-shadow:var(--zhr-shadow-card);
}

.zhr-naji-prevention-grid h3{
    color:var(--zhr-yellow-light);
}

.zhr-naji-prevention-grid p{
    color:var(--zhr-text-soft);
}

.zhr-naji-prevention-note{
    max-width:900px;
    margin:45px auto 0;
    padding:28px;
    border-left:3px solid var(--zhr-yellow);
    background:var(--zhr-yellow-glass);
}

.zhr-naji-prevention-note-fa{
    direction:rtl;
    text-align:right;
    color:var(--zhr-gold-pale);
}


/* =========================================================
   ENGINEERING
   ========================================================= */

.zhr-naji-engineering-responsibility{
    background:
        linear-gradient(
            180deg,
            var(--zhr-black),
            var(--zhr-graphite-deep)
        );
}

.zhr-naji-engineering-intro{
    max-width:850px;
    margin:auto;
    text-align:center;
    color:var(--zhr-text-soft);
}

.zhr-naji-engineering-principles{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin:40px auto;
}

.zhr-naji-engineering-principles span{
    padding:11px 18px;
    border:1px solid var(--zhr-line-steel);
    border-radius:999px;
    color:var(--zhr-steel-bright);
    background:rgba(102,112,120,.07);
}

.zhr-naji-engineering-validation,
.zhr-naji-engineering-honesty{
    max-width:1000px;
    margin:22px auto;
    padding:34px;
    border:1px solid var(--zhr-line-steel);
    border-radius:var(--zhr-radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(102,112,120,.08),
            rgba(5,6,8,.88)
        );
}

.zhr-naji-engineering-honesty{
    border-color:var(--zhr-line);
}

.zhr-naji-engineering-closing{
    max-width:850px;
    margin:45px auto 0;
    text-align:center;
    color:var(--zhr-bronze-gold-light);
}


/* =========================================================
   UNIFIED ARCHITECTURE
   ========================================================= */

.zhr-naji-unified-architecture{
    background:
        radial-gradient(
            circle at 70% 35%,
            rgba(35,136,216,.10),
            transparent 36%
        ),
        var(--zhr-navy-deep);
}

.zhr-naji-unified-layers{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.zhr-naji-unified-layers > *{
    padding:30px;
    border:1px solid var(--zhr-line-blue);
    border-radius:var(--zhr-radius-lg);
    background:var(--zhr-glass-blue);
}

.zhr-naji-unified-flow{
    margin:45px auto;
    max-width:1000px;
    padding:35px;
    border:1px solid var(--zhr-line);
    border-radius:var(--zhr-radius-lg);
    background:var(--zhr-glass-bronze);
    text-align:center;
}

.zhr-naji-zhr-rose{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:25px;
}

.zhr-naji-zhr-rose > *{
    padding:35px;
    border-radius:var(--zhr-radius-lg);
    border:1px solid var(--zhr-line);
    background:
        linear-gradient(
            145deg,
            rgba(169,132,74,.08),
            rgba(6,16,28,.78)
        );
}

.zhr-naji-zhr-rose > *:nth-child(2){
    border-color:var(--zhr-line-blue);
}

.zhr-naji-unified-security{
    margin-top:25px;
    padding:35px;
    border:1px solid var(--zhr-line-green);
    border-radius:var(--zhr-radius-lg);
    background:var(--zhr-green-glass);
}

.zhr-naji-unified-closing{
    max-width:900px;
    margin:45px auto 0;
    text-align:center;
    color:var(--zhr-electric-light);
}


/* =========================================================
   TRUST / SECURITY
   ========================================================= */

.zhr-naji-trust-security{
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(169,132,74,.10),
            transparent 40%
        ),
        #030405;
}

.zhr-naji-trust-pillars{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.zhr-naji-trust-pillars article{
    padding:30px;
    border:1px solid var(--zhr-line);
    border-radius:var(--zhr-radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(169,132,74,.08),
            rgba(6,16,28,.80)
        );
    box-shadow:var(--zhr-shadow-card);
}

.zhr-naji-trust-pillars h3{
    color:var(--zhr-bronze-gold-bright);
}

.zhr-naji-trust-content{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:25px;
}

.zhr-naji-trust-content article{
    padding:32px;
    border:1px solid var(--zhr-line-blue);
    border-radius:var(--zhr-radius-lg);
    background:var(--zhr-glass-navy);
}

.zhr-naji-data-lifecycle{
    margin-top:35px;
    padding:35px;
    border:1px solid var(--zhr-line-steel);
    border-radius:var(--zhr-radius-lg);
    background:rgba(102,112,120,.055);
}

.zhr-naji-trust-principles{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-top:30px;
}

.zhr-naji-trust-principles > *{
    padding:11px 18px;
    border:1px solid var(--zhr-line);
    border-radius:999px;
    background:var(--zhr-glass-bronze);
    color:var(--zhr-gold-pale);
}

.zhr-naji-trust-closing{
    max-width:900px;
    margin:50px auto 0;
    text-align:center;
    color:var(--zhr-bronze-gold-bright);
}


/* =========================================================
   FUTURE PROTECTION
   ========================================================= */

.zhr-naji-future-protection{
    background:
        radial-gradient(
            circle at 30% 40%,
            rgba(77,154,104,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 75% 35%,
            rgba(35,136,216,.08),
            transparent 32%
        ),
        var(--zhr-black);
}

.zhr-naji-future-intro{
    max-width:850px;
    margin:auto;
    text-align:center;
    color:var(--zhr-text-soft);
}

.zhr-naji-future-pillars{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:50px;
}

.zhr-naji-future-pillars article{
    padding:35px;
    border:1px solid var(--zhr-line-green);
    border-radius:var(--zhr-radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(77,154,104,.08),
            rgba(6,16,28,.80)
        );
    box-shadow:var(--zhr-shadow-card);
}

.zhr-naji-future-pillars article:nth-child(2){
    border-color:var(--zhr-line-blue);
}

.zhr-naji-future-pillars article:nth-child(3){
    border-color:var(--zhr-line);
}

.zhr-naji-future-humanity{
    max-width:900px;
    margin:45px auto 0;
    padding:35px;
    border:1px solid var(--zhr-line);
    border-radius:var(--zhr-radius-lg);
    background:var(--zhr-glass-bronze);
    text-align:center;
}

.zhr-naji-future-closing{
    max-width:900px;
    margin:50px auto 0;
    text-align:center;
    color:var(--zhr-green-light);
}


/* =========================================================
   ARCHITECTURE OF TRUST
   ========================================================= */

.zhr-naji-trust-architecture{
    background:
        linear-gradient(
            180deg,
            #050403,
            #0A0805,
            #030405
        );
}

.zhr-naji-trust-foundation,
.zhr-naji-trust-security-model{
    max-width:1000px;
    margin:25px auto;
    padding:40px;
    border:1px solid var(--zhr-line);
    border-radius:var(--zhr-radius-xl);
    background:
        linear-gradient(
            145deg,
            rgba(169,132,74,.10),
            rgba(6,16,28,.82)
        );
    box-shadow:var(--zhr-shadow-card);
}

.zhr-naji-trust-security-model{
    border-color:var(--zhr-line-blue);
    background:
        linear-gradient(
            145deg,
            rgba(35,136,216,.09),
            rgba(6,16,28,.84)
        );
}

.zhr-naji-trust-final-note{
    max-width:850px;
    margin:45px auto 0;
    text-align:center;
    color:var(--zhr-gold-pale);
}


/* =========================================================
   FINAL MESSAGE
   ========================================================= */

.zhr-naji-final-message{
    position:relative;
    min-height:90vh;
    display:flex;
    align-items:center;
    padding:130px 24px;
    overflow:hidden;
    background:#010203;
}

.zhr-naji-final-background{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(35,136,216,.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 25% 55%,
            rgba(169,132,74,.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #010203,
            #06101C 52%,
            #020304
        );
}

.zhr-naji-final-media{
    position:absolute;
    inset:0;
    border:0;
    border-radius:0;
    opacity:.30;
    box-shadow:none;
}

.zhr-naji-final-media::before{
    border:0;
}

.zhr-naji-final-media::after{
    width:500px;
    height:500px;
    border-color:rgba(35,136,216,.12);
}

.zhr-naji-final-shell{
    position:relative;
    z-index:5;
    width:min(100%,1000px);
    margin:auto;
    padding:70px;
    border:1px solid rgba(169,132,74,.30);
    border-radius:var(--zhr-radius-xl);
    background:rgba(2,3,4,.70);
    backdrop-filter:blur(22px);
    box-shadow:
        var(--zhr-shadow-deep),
        0 0 90px rgba(35,136,216,.08);
    text-align:center;
}

.zhr-naji-final-title-fa{
    margin:0 0 30px;
    color:var(--zhr-gold-pale);
    font-size:1.25rem;
}

.zhr-naji-final-copy{
    color:var(--zhr-white);
    font-size:clamp(2rem,5vw,4.5rem);
    line-height:1.05;
    letter-spacing:-.045em;
}

.zhr-naji-final-sacred-line{
    margin:40px auto 0;
    max-width:700px;
    color:var(--zhr-bronze-gold-bright);
    font-size:1.2rem;
    line-height:2;
}

.zhr-naji-signature{
    margin-top:40px;
    color:var(--zhr-electric-light);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.28em;
    text-transform:uppercase;
}

.zhr-naji-final-closing{
    margin-top:20px;
    color:var(--zhr-text-soft);
}


/* =========================================================
   GLOBAL TYPOGRAPHY INSIDE ZHR ONLY
   ========================================================= */

.zhr-naji-section p{
    font-size:1rem;
}

.zhr-naji-section h3{
    line-height:1.2;
}

.zhr-naji-section article{
    transition:
        transform var(--zhr-transition),
        border-color var(--zhr-transition),
        box-shadow var(--zhr-transition);
}


/* =========================================================
   PROTECTION CORNERS
   ========================================================= */

.zhr-naji-mission-card,
.zhr-naji-layer-grid article,
.zhr-naji-human-grid article,
.zhr-naji-intelligence-content article,
.zhr-naji-accessibility-grid article,
.zhr-naji-prevention-grid article,
.zhr-naji-trust-pillars article,
.zhr-naji-future-pillars article{
    overflow:hidden;
}

.zhr-naji-mission-card::after,
.zhr-naji-layer-grid article::after,
.zhr-naji-human-grid article::after,
.zhr-naji-intelligence-content article::after,
.zhr-naji-accessibility-grid article::after,
.zhr-naji-prevention-grid article::after,
.zhr-naji-trust-pillars article::after,
.zhr-naji-future-pillars article::after{
    content:"";
    position:absolute;
    width:45px;
    height:45px;
    right:0;
    bottom:0;
    border-right:1px solid rgba(199,169,106,.25);
    border-bottom:1px solid rgba(199,169,106,.25);
    pointer-events:none;
}


/* =========================================================
   SAFE STATE
   ========================================================= */

.zhr-naji-unified-security,
.zhr-naji-feedback-loop{
    box-shadow:
        var(--zhr-shadow-soft),
        inset 0 0 35px rgba(77,154,104,.035);
}


/* =========================================================
   FOCUS
   ========================================================= */

.zhr-naji-main a:focus-visible,
.zhr-naji-main button:focus-visible{
    outline:2px solid var(--zhr-electric-light);
    outline-offset:4px;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes zhr-naji-scan-pulse{
    0%,100%{
        transform:translateY(-50%) scale(.96);
        opacity:.55;
    }

    50%{
        transform:translateY(-50%) scale(1.02);
        opacity:.95;
    }
}

@keyframes zhr-naji-status-pulse{
    0%,100%{
        opacity:.55;
        transform:scale(.9);
    }

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


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1100px){

    .zhr-naji-hero-container{
        grid-template-columns:1fr;
        gap:45px;
    }

    .zhr-naji-hero-copy{
        max-width:900px;
    }

    .zhr-naji-hero-media{
        min-height:380px;
    }

    .zhr-naji-layer-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .zhr-naji-prevention-grid,
    .zhr-naji-version-grid,
    .zhr-naji-trust-pillars{
        grid-template-columns:repeat(2,1fr);
    }

    .zhr-naji-human-grid,
    .zhr-naji-accessibility-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .zhr-naji-emergency-journey{
        grid-template-columns:repeat(3,1fr);
    }

    .zhr-naji-emergency-journey::before{
        display:none;
    }
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width:800px){

    .zhr-naji-section{
        padding:85px 20px;
    }

    .zhr-naji-hero-container{
        padding:110px 20px 130px;
    }

    .zhr-naji-hero-title{
        font-size:clamp(2.7rem,12vw,5rem);
    }

    .zhr-naji-hero-media{
        min-height:320px;
    }

    .zhr-naji-hero-bottom{
        width:calc(100% - 30px);
        grid-template-columns:repeat(3,1fr);
    }

    .zhr-naji-hero-bottom > *{
        border-bottom:1px solid rgba(169,132,74,.12);
    }

    .zhr-naji-philosophy-layout,
    .zhr-naji-mission-grid,
    .zhr-naji-intelligence-content,
    .zhr-naji-architecture-trinity,
    .zhr-naji-architecture-principles,
    .zhr-naji-evolution-content,
    .zhr-naji-unified-layers,
    .zhr-naji-zhr-rose,
    .zhr-naji-trust-content,
    .zhr-naji-future-pillars{
        grid-template-columns:1fr;
    }

    .zhr-naji-sacred-frame,
    .zhr-naji-final-shell{
        padding:42px 25px;
    }

    .zhr-naji-evolution-cycle{
        flex-direction:column;
    }

    .zhr-naji-evolution-cycle > *{
        width:100%;
    }

    .zhr-naji-evolution-cycle > * + *{
        margin-left:0;
        margin-top:-1px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:560px){

    .zhr-naji-section{
        padding:70px 16px;
    }

    .zhr-naji-hero-container{
        padding:90px 16px 140px;
    }

    .zhr-naji-hero-status{
        gap:8px;
    }

    .zhr-naji-status-point{
        font-size:.65rem;
        padding:8px 11px;
    }

    .zhr-naji-hero-bottom{
        grid-template-columns:repeat(2,1fr);
        bottom:12px;
    }

    .zhr-naji-hero-bottom > *{
        padding:11px 5px;
        font-size:.58rem;
    }

    .zhr-naji-principle-list,
    .zhr-naji-emergency-actions,
    .zhr-naji-layer-grid,
    .zhr-naji-human-grid,
    .zhr-naji-accessibility-grid,
    .zhr-naji-prevention-grid,
    .zhr-naji-version-grid,
    .zhr-naji-trust-pillars{
        grid-template-columns:1fr;
    }

    .zhr-naji-sacred-frame{
        padding:38px 20px;
    }

    .zhr-naji-sacred-strong{
        font-size:1.55rem;
    }

    .zhr-naji-purpose-human{
        padding:22px;
    }

    .zhr-naji-media-slot{
        min-height:240px;
    }

    .zhr-naji-media-slot img{
        min-height:240px;
    }

    .zhr-naji-final-message{
        padding:90px 16px;
    }

    .zhr-naji-final-shell{
        padding:40px 20px;
    }

    .zhr-naji-final-copy{
        font-size:2.2rem;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
   }












/* =========================================================
   ZHR NAJI — SIGNATURE DARK MATTE BRONZE ENVIRONMENT
   ========================================================= */

html{
    background:#100C08;
}

body{
    background:
        radial-gradient(
            ellipse at 50% -10%,
            rgba(112,78,39,.18) 0%,
            rgba(54,37,22,.10) 28%,
            transparent 58%
        ),
        radial-gradient(
            ellipse at 0% 45%,
            rgba(90,62,31,.08) 0%,
            transparent 42%
        ),
        radial-gradient(
            ellipse at 100% 65%,
            rgba(76,53,28,.07) 0%,
            transparent 44%
        ),
        linear-gradient(
            180deg,
            #120D08 0%,
            #181109 22%,
            #1D140C 48%,
            #171008 72%,
            #100C08 100%
        );
    color:var(--zhr-text);
}


/* =========================================================
   MAIN MATTE BRONZE FIELD
   ========================================================= */

.zhr-naji-main{
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(126,89,46,.13),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 8% 32%,
            rgba(87,59,30,.08),
            transparent 35%
        ),
        radial-gradient(
            ellipse at 92% 68%,
            rgba(77,53,27,.07),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #171008 0%,
            #21170D 28%,
            #1B130B 52%,
            #20160D 75%,
            #130E08 100%
        );
}


/* بسیار ظریف؛ حس فلز مات، نه بافت مصنوعی */
.zhr-naji-main::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.16;
    background:
        repeating-linear-gradient(
            115deg,
            rgba(255,255,255,.012) 0px,
            rgba(255,255,255,.012) 1px,
            transparent 1px,
            transparent 7px
        );
    mix-blend-mode:soft-light;
}


/* =========================================================
   ALL ZHR SECTIONS — MATTE BRONZE CONTINUITY
   ========================================================= */

.zhr-naji-section{
    background:
        linear-gradient(
            180deg,
            rgba(32,22,13,.96),
            rgba(25,17,10,.96)
        );
}


/* هر سکشن هویت خودش را دارد اما دیگر سیاه خالص نیست */

.zhr-naji-philosophy{
    background:
        radial-gradient(
            ellipse at 20% 45%,
            rgba(169,132,74,.12),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #24190E,
            #1C130B
        );
}

.zhr-naji-purpose{
    background:
        radial-gradient(
            ellipse at 80% 25%,
            rgba(35,136,216,.07),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #21170D,
            #1B130B
        );
}

.zhr-naji-architecture{
    background:
        radial-gradient(
            ellipse at 50% 30%,
            rgba(35,136,216,.08),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #1C140C,
            #24190E
        );
}

.zhr-naji-human-protection{
    background:
        radial-gradient(
            ellipse at 15% 45%,
            rgba(77,154,104,.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #21170D,
            #191109
        );
}

.zhr-naji-intelligent-safety{
    background:
        radial-gradient(
            ellipse at 80% 30%,
            rgba(35,136,216,.09),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #1B130B,
            #24190E
        );
}

.zhr-naji-emergency{
    background:
        radial-gradient(
            ellipse at 50% 30%,
            rgba(198,59,50,.06),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #24160D,
            #180F09
        );
}

.zhr-naji-accessibility{
    background:
        radial-gradient(
            ellipse at 25% 35%,
            rgba(47,120,183,.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #20160D,
            #1A120A
        );
}

.zhr-naji-circle{
    background:
        radial-gradient(
            ellipse at 50% 25%,
            rgba(169,132,74,.10),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #251A0F,
            #1A120A
        );
}

.zhr-naji-prevention{
    background:
        radial-gradient(
            ellipse at 25% 40%,
            rgba(214,165,46,.065),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #24190E,
            #1B130B
        );
}

.zhr-naji-engineering-responsibility{
    background:
        linear-gradient(
            180deg,
            #20160D,
            #171008
        );
}

.zhr-naji-unified-architecture{
    background:
        radial-gradient(
            ellipse at 70% 35%,
            rgba(35,136,216,.08),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #1B130B,
            #24190E
        );
}

.zhr-naji-trust-security{
    background:
        radial-gradient(
            ellipse at 50% 25%,
            rgba(169,132,74,.10),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #24190E,
            #171008
        );
}

.zhr-naji-future-protection{
    background:
        radial-gradient(
            ellipse at 30% 40%,
            rgba(77,154,104,.06),
            transparent 30%
        ),
        radial-gradient(
            ellipse at 75% 35%,
            rgba(35,136,216,.07),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #21170D,
            #171008
        );
}

.zhr-naji-trust-architecture{
    background:
        radial-gradient(
            ellipse at 50% 30%,
            rgba(169,132,74,.11),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #261B10,
            #140E08
        );
}
/* =========================================================
   ZHR NAJI — PATCH 01
   PREMIUM PROTECTION CARDS
   Dark Matte Bronze Glass / Bronze Frame / Navy Depth
   ========================================================= */

.zhr-naji-mission-card,
.zhr-naji-layer-grid article,
.zhr-naji-human-grid article,
.zhr-naji-intelligence-content article,
.zhr-naji-accessibility-grid article,
.zhr-naji-prevention-grid article,
.zhr-naji-trust-pillars article,
.zhr-naji-future-pillars article {

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(91, 64, 35, 0.72) 0%,
            rgba(48, 34, 21, 0.88) 48%,
            rgba(13, 25, 35, 0.84) 100%
        );

    border: 1px solid rgba(199, 169, 106, 0.28);

    border-radius: 24px;

    box-shadow:
        0 28px 75px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        inset 0 0 45px rgba(169, 132, 74, 0.045);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition:
        transform 0.55s cubic-bezier(.22,.61,.36,1),
        border-color 0.55s cubic-bezier(.22,.61,.36,1),
        box-shadow 0.55s cubic-bezier(.22,.61,.36,1),
        background 0.55s cubic-bezier(.22,.61,.36,1);
}


/* ---------------------------------------------------------
   SUBTLE METALLIC TOP EDGE
   --------------------------------------------------------- */

.zhr-naji-mission-card::before,
.zhr-naji-layer-grid article::before,
.zhr-naji-human-grid article::before,
.zhr-naji-intelligence-content article::before,
.zhr-naji-accessibility-grid article::before,
.zhr-naji-prevention-grid article::before,
.zhr-naji-trust-pillars article::before,
.zhr-naji-future-pillars article::before {

    content: "";

    position: absolute;

    top: 0;
    left: 12%;
    right: 12%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(216, 188, 122, 0.62),
            transparent
        );

    opacity: 0.72;

    pointer-events: none;
}


/* ---------------------------------------------------------
   INTERNAL BRONZE ATMOSPHERE
   --------------------------------------------------------- */

.zhr-naji-mission-card::after,
.zhr-naji-layer-grid article::after,
.zhr-naji-human-grid article::after,
.zhr-naji-intelligence-content article::after,
.zhr-naji-accessibility-grid article::after,
.zhr-naji-prevention-grid article::after,
.zhr-naji-trust-pillars article::after,
.zhr-naji-future-pillars article::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(199, 169, 106, 0.09) 0%,
            rgba(169, 132, 74, 0.035) 38%,
            transparent 72%
        );

    pointer-events: none;

    opacity: 0.9;
}


/* ---------------------------------------------------------
   CARD CONTENT ALWAYS ABOVE EFFECT LAYERS
   --------------------------------------------------------- */

.zhr-naji-mission-card > *,
.zhr-naji-layer-grid article > *,
.zhr-naji-human-grid article > *,
.zhr-naji-intelligence-content article > *,
.zhr-naji-accessibility-grid article > *,
.zhr-naji-prevention-grid article > *,
.zhr-naji-trust-pillars article > *,
.zhr-naji-future-pillars article > * {

    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   PREMIUM HOVER
   --------------------------------------------------------- */

.zhr-naji-mission-card:hover,
.zhr-naji-layer-grid article:hover,
.zhr-naji-human-grid article:hover,
.zhr-naji-intelligence-content article:hover,
.zhr-naji-accessibility-grid article:hover,
.zhr-naji-prevention-grid article:hover,
.zhr-naji-trust-pillars article:hover,
.zhr-naji-future-pillars article:hover {

    transform: translateY(-7px);

    border-color:
        rgba(216, 188, 122, 0.52);

    background:
        linear-gradient(
            145deg,
            rgba(105, 74, 40, 0.78) 0%,
            rgba(52, 37, 23, 0.90) 46%,
            rgba(12, 29, 42, 0.88) 100%
        );

    box-shadow:
        0 36px 95px rgba(0, 0, 0, 0.52),
        0 0 42px rgba(169, 132, 74, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.065),
        inset 0 0 55px rgba(169, 132, 74, 0.055);
}


/* ---------------------------------------------------------
   HOVER TOP EDGE
   --------------------------------------------------------- */

.zhr-naji-mission-card:hover::before,
.zhr-naji-layer-grid article:hover::before,
.zhr-naji-human-grid article:hover::before,
.zhr-naji-intelligence-content article:hover::before,
.zhr-naji-accessibility-grid article:hover::before,
.zhr-naji-prevention-grid article:hover::before,
.zhr-naji-trust-pillars article:hover::before,
.zhr-naji-future-pillars article:hover::before {

    opacity: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(216, 188, 122, 0.95),
            transparent
        );
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .zhr-naji-mission-card,
    .zhr-naji-layer-grid article,
    .zhr-naji-human-grid article,
    .zhr-naji-intelligence-content article,
    .zhr-naji-accessibility-grid article,
    .zhr-naji-prevention-grid article,
    .zhr-naji-trust-pillars article,
    .zhr-naji-future-pillars article {

        transition: none;
    }

    .zhr-naji-mission-card:hover,
    .zhr-naji-layer-grid article:hover,
    .zhr-naji-human-grid article:hover,
    .zhr-naji-intelligence-content article:hover,
    .zhr-naji-accessibility-grid article:hover,
    .zhr-naji-prevention-grid article:hover,
    .zhr-naji-trust-pillars article:hover,
    .zhr-naji-future-pillars article:hover {

        transform: none;
    }
}


/* =========================================================
   ZHR NAJI — PATCH 02
   INDUSTRIAL 3D PROTECTION MODULES
   ========================================================= */

.zhr-naji-mission-card,
.zhr-naji-layer-grid article,
.zhr-naji-human-grid article,
.zhr-naji-intelligence-content article,
.zhr-naji-accessibility-grid article,
.zhr-naji-prevention-grid article,
.zhr-naji-trust-pillars article,
.zhr-naji-future-pillars article {

    transform-style: preserve-3d;
    perspective: 1200px;

    background:
        linear-gradient(
            155deg,
            rgba(111, 79, 43, .92) 0%,
            rgba(65, 46, 27, .96) 34%,
            rgba(30, 27, 23, .98) 68%,
            rgba(8, 19, 28, .98) 100%
        );

    border: 1px solid rgba(215, 185, 116, .42);

    border-radius: 22px;

    box-shadow:
        0 2px 0 rgba(230, 204, 143, .12) inset,
        0 -2px 0 rgba(0, 0, 0, .55) inset,
        0 18px 0 -7px rgba(31, 22, 14, .95),
        0 26px 0 -11px rgba(12, 17, 20, .92),
        0 34px 65px rgba(0, 0, 0, .62),
        0 0 0 1px rgba(0, 0, 0, .38);

    transition:
        transform .5s cubic-bezier(.2,.75,.25,1),
        box-shadow .5s cubic-bezier(.2,.75,.25,1),
        border-color .5s ease,
        background .5s ease;
}


/* ---------------------------------------------------------
   INDUSTRIAL INNER FRAME
   --------------------------------------------------------- */

.zhr-naji-mission-card::before,
.zhr-naji-layer-grid article::before,
.zhr-naji-human-grid article::before,
.zhr-naji-intelligence-content article::before,
.zhr-naji-accessibility-grid article::before,
.zhr-naji-prevention-grid article::before,
.zhr-naji-trust-pillars article::before,
.zhr-naji-future-pillars article::before {

    content: "";

    position: absolute;

    inset: 8px;

    border: 1px solid rgba(199, 169, 106, .15);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            transparent 28%,
            transparent 72%,
            rgba(35,136,216,.035)
        );

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.18),
        inset 0 0 25px rgba(169,132,74,.035);

    pointer-events: none;

    z-index: 0;
}


/* ---------------------------------------------------------
   3D TOP PLATE
   --------------------------------------------------------- */

.zhr-naji-mission-card::after,
.zhr-naji-layer-grid article::after,
.zhr-naji-human-grid article::after,
.zhr-naji-intelligence-content article::after,
.zhr-naji-accessibility-grid article::after,
.zhr-naji-prevention-grid article::after,
.zhr-naji-trust-pillars article::after,
.zhr-naji-future-pillars article::after {

    content: "";

    position: absolute;

    top: 0;
    left: 20%;
    right: 20%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(225, 198, 130, .9),
            rgba(255, 255, 255, .25),
            rgba(225, 198, 130, .9),
            transparent
        );

    box-shadow:
        0 0 12px rgba(199,169,106,.18);

    opacity: .9;

    pointer-events: none;

    z-index: 3;
}


/* ---------------------------------------------------------
   CONTENT FLOATS ABOVE THE HARDWARE
   --------------------------------------------------------- */

.zhr-naji-mission-card > *,
.zhr-naji-layer-grid article > *,
.zhr-naji-human-grid article > *,
.zhr-naji-intelligence-content article > *,
.zhr-naji-accessibility-grid article > *,
.zhr-naji-prevention-grid article > *,
.zhr-naji-trust-pillars article > *,
.zhr-naji-future-pillars article > * {

    position: relative;

    z-index: 5;

    transform: translateZ(18px);
}


/* ---------------------------------------------------------
   INDUSTRIAL HOVER / PHYSICAL LIFT
   --------------------------------------------------------- */

.zhr-naji-mission-card:hover,
.zhr-naji-layer-grid article:hover,
.zhr-naji-human-grid article:hover,
.zhr-naji-intelligence-content article:hover,
.zhr-naji-accessibility-grid article:hover,
.zhr-naji-prevention-grid article:hover,
.zhr-naji-trust-pillars article:hover,
.zhr-naji-future-pillars article:hover {

    transform:
        translateY(-12px)
        translateZ(10px)
        rotateX(1deg);

    border-color:
        rgba(226, 197, 127, .72);

    background:
        linear-gradient(
            155deg,
            rgba(130, 93, 50, .96) 0%,
            rgba(71, 49, 28, .98) 34%,
            rgba(29, 30, 28, .99) 66%,
            rgba(8, 24, 36, 1) 100%
        );

    box-shadow:
        0 2px 0 rgba(242, 218, 160, .18) inset,
        0 -3px 0 rgba(0,0,0,.62) inset,
        0 20px 0 -7px rgba(31,22,14,.98),
        0 30px 0 -11px rgba(8,15,19,.96),
        0 48px 95px rgba(0,0,0,.72),
        0 0 45px rgba(169,132,74,.12);
}


/* ---------------------------------------------------------
   METAL CORNER DETAILS
   --------------------------------------------------------- */

.zhr-naji-mission-card > :first-child::before,
.zhr-naji-layer-grid article > :first-child::before,
.zhr-naji-human-grid article > :first-child::before,
.zhr-naji-intelligence-content article > :first-child::before,
.zhr-naji-accessibility-grid article > :first-child::before,
.zhr-naji-prevention-grid article > :first-child::before,
.zhr-naji-trust-pillars article > :first-child::before,
.zhr-naji-future-pillars article > :first-child::before {

    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: -3px;
    left: -3px;

    border-top: 1px solid rgba(216,188,122,.8);
    border-left: 1px solid rgba(216,188,122,.8);

    opacity: .8;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .zhr-naji-mission-card,
    .zhr-naji-layer-grid article,
    .zhr-naji-human-grid article,
    .zhr-naji-intelligence-content article,
    .zhr-naji-accessibility-grid article,
    .zhr-naji-prevention-grid article,
    .zhr-naji-trust-pillars article,
    .zhr-naji-future-pillars article {

        border-radius: 18px;

        box-shadow:
            0 14px 0 -7px rgba(31,22,14,.95),
            0 24px 48px rgba(0,0,0,.55);
    }

    .zhr-naji-mission-card:hover,
    .zhr-naji-layer-grid article:hover,
    .zhr-naji-human-grid article:hover,
    .zhr-naji-intelligence-content article:hover,
    .zhr-naji-accessibility-grid article:hover,
    .zhr-naji-prevention-grid article:hover,
    .zhr-naji-trust-pillars article:hover,
    .zhr-naji-future-pillars article:hover {

        transform: translateY(-6px);
    }
}




/* =========================================================
   ZHR NAJI — PATCH 03
   HERO / SIGNATURE BRONZE PROTECTION ORBITS
   ========================================================= */


/* ---------------------------------------------------------
   MAIN ORBIT COLOR
   --------------------------------------------------------- */

.zhr-naji-hero-scan,
.zhr-naji-hero-scan::before,
.zhr-naji-hero-scan::after {

    border-color:
        rgba(199, 169, 106, 0.78) !important;

    box-shadow:
        0 0 10px rgba(169, 132, 74, 0.30),
        0 0 28px rgba(169, 132, 74, 0.16),
        0 0 55px rgba(169, 132, 74, 0.08);

}


/* ---------------------------------------------------------
   STRONGER BRONZE ENERGY FIELD
   --------------------------------------------------------- */

.zhr-naji-hero-scan {

    filter:
        drop-shadow(0 0 10px rgba(169,132,74,.28))
        drop-shadow(0 0 28px rgba(169,132,74,.12));

    opacity: 0.96 !important;

}


/* ---------------------------------------------------------
   INNER ENERGY HALO
   --------------------------------------------------------- */

.zhr-naji-hero-scan::before {

    content: "";

    position: absolute;

    inset: -18px;

    border: 1px solid
        rgba(169,132,74,.16);

    border-radius: 50%;

    box-shadow:
        0 0 18px rgba(169,132,74,.14),
        0 0 45px rgba(169,132,74,.09),
        inset 0 0 25px rgba(169,132,74,.06);

    pointer-events: none;

}


/* ---------------------------------------------------------
   OUTER PROTECTION ENERGY
   --------------------------------------------------------- */

.zhr-naji-hero-scan::after {

    content: "";

    position: absolute;

    inset: -34px;

    border: 1px solid
        rgba(169,132,74,.075);

    border-radius: 50%;

    box-shadow:
        0 0 35px rgba(169,132,74,.10),
        0 0 80px rgba(169,132,74,.055);

    pointer-events: none;

}


/* ---------------------------------------------------------
   REMOVE BLUE / NAVY DOMINANCE FROM HERO ORBITS
   --------------------------------------------------------- */

.zhr-naji-hero-scan {

    background:
        radial-gradient(
            circle,
            rgba(169,132,74,.035) 0%,
            rgba(169,132,74,.018) 42%,
            transparent 72%
        ) !important;

}


/* ---------------------------------------------------------
   SIGNATURE MATTE BRONZE HIGHLIGHT
   --------------------------------------------------------- */

.zhr-naji-hero-scan {

    border-color:
        rgba(216,188,122,.72) !important;

    box-shadow:
        0 0 0 1px rgba(115,84,43,.18),
        0 0 14px rgba(169,132,74,.24),
        0 0 35px rgba(169,132,74,.13),
        0 0 75px rgba(169,132,74,.065);

}


/* ---------------------------------------------------------
   MOBILE CONTROL
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .zhr-naji-hero-scan {

        box-shadow:
            0 0 10px rgba(169,132,74,.24),
            0 0 28px rgba(169,132,74,.10);

    }

    .zhr-naji-hero-scan::before {

        inset: -12px;

    }

    .zhr-naji-hero-scan::after {

        inset: -22px;

    }

}



/* =========================================================
   ZHR NAJI — PATCH 04
   HERO BRONZE ENERGY FIELD
   Strong Matte Bronze-Gold Atmospheric Glow
   ========================================================= */


/* ---------------------------------------------------------
   PRIMARY BRONZE ENERGY AURA
   --------------------------------------------------------- */

.zhr-naji-hero-scan {

    filter:
        drop-shadow(0 0 12px rgba(216,188,122,.72))
        drop-shadow(0 0 32px rgba(199,169,106,.58))
        drop-shadow(0 0 70px rgba(169,132,74,.42))
        drop-shadow(0 0 125px rgba(169,132,74,.22));

}


/* ---------------------------------------------------------
   INNER ENERGY FIELD
   --------------------------------------------------------- */

.zhr-naji-hero-scan::before {

    box-shadow:

        0 0 20px rgba(216,188,122,.62),

        0 0 45px rgba(199,169,106,.52),

        0 0 90px rgba(169,132,74,.40),

        0 0 150px rgba(169,132,74,.24),

        0 0 230px rgba(169,132,74,.13),

        inset 0 0 35px rgba(216,188,122,.18);

}


/* ---------------------------------------------------------
   OUTER ATMOSPHERIC ENERGY
   --------------------------------------------------------- */

.zhr-naji-hero-scan::after {

    box-shadow:

        0 0 35px rgba(216,188,122,.38),

        0 0 75px rgba(199,169,106,.34),

        0 0 130px rgba(169,132,74,.27),

        0 0 210px rgba(169,132,74,.18),

        0 0 320px rgba(169,132,74,.10);

}


/* ---------------------------------------------------------
   HERO ATMOSPHERE
   Bronze energy actually illuminates the environment
   --------------------------------------------------------- */

.zhr-naji-hero {

    background:

        radial-gradient(
            ellipse at 50% 45%,
            rgba(199,169,106,.16) 0%,
            rgba(169,132,74,.11) 18%,
            rgba(169,132,74,.065) 34%,
            rgba(169,132,74,.025) 52%,
            transparent 72%
        ),

        radial-gradient(
            ellipse at 50% 55%,
            rgba(216,188,122,.075) 0%,
            transparent 58%
        );

}


/* ---------------------------------------------------------
   CENTRAL BRONZE LIGHT BLOOM
   --------------------------------------------------------- */

.zhr-naji-hero::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 75vw;
    height: 75vw;

    transform: translate(-50%, -50%);

    max-width: 1050px;
    max-height: 1050px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(216,188,122,.075) 0%,
            rgba(199,169,106,.055) 18%,
            rgba(169,132,74,.035) 38%,
            transparent 70%
        );

    filter: blur(18px);

    pointer-events: none;

    z-index: 0;

}


/* ---------------------------------------------------------
   SECONDARY BRONZE LIGHT CLOUD
   --------------------------------------------------------- */

.zhr-naji-hero::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 38%;

    width: 55vw;
    height: 35vw;

    transform: translate(-50%, -50%);

    background:

        radial-gradient(
            ellipse,
            rgba(199,169,106,.09) 0%,
            rgba(169,132,74,.045) 32%,
            transparent 72%
        );

    filter: blur(35px);

    pointer-events: none;

    z-index: 0;

}


/* ---------------------------------------------------------
   KEEP HERO CONTENT ABOVE LIGHT
   --------------------------------------------------------- */

.zhr-naji-hero-container,
.zhr-naji-hero-copy,
.zhr-naji-hero-media,
.zhr-naji-hero-bottom {

    position: relative;

    z-index: 5;

}


/* ---------------------------------------------------------
   MOBILE — STILL VISIBLE, LESS SPREAD
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .zhr-naji-hero-scan {

        filter:
            drop-shadow(0 0 10px rgba(216,188,122,.65))
            drop-shadow(0 0 28px rgba(199,169,106,.45))
            drop-shadow(0 0 65px rgba(169,132,74,.28));

    }

    .zhr-naji-hero::before {

        width: 125vw;
        height: 125vw;

    }

    .zhr-naji-hero::after {

        width: 100vw;
        height: 65vw;

    }

}


/* =========================================================
   ZHR NAJI — PATCH 04
   HERO BRONZE ENERGY FIELD
   Strong Matte Bronze-Gold Atmospheric Glow
   ========================================================= */


/* ---------------------------------------------------------
   PRIMARY BRONZE ENERGY AURA
   --------------------------------------------------------- */

.zhr-naji-hero-scan {

    filter:
        drop-shadow(0 0 12px rgba(216,188,122,.72))
        drop-shadow(0 0 32px rgba(199,169,106,.58))
        drop-shadow(0 0 70px rgba(169,132,74,.42))
        drop-shadow(0 0 125px rgba(169,132,74,.22));

}


/* ---------------------------------------------------------
   INNER ENERGY FIELD
   --------------------------------------------------------- */

.zhr-naji-hero-scan::before {

    box-shadow:

        0 0 20px rgba(216,188,122,.62),

        0 0 45px rgba(199,169,106,.52),

        0 0 90px rgba(169,132,74,.40),

        0 0 150px rgba(169,132,74,.24),

        0 0 230px rgba(169,132,74,.13),

        inset 0 0 35px rgba(216,188,122,.18);

}


/* ---------------------------------------------------------
   OUTER ATMOSPHERIC ENERGY
   --------------------------------------------------------- */

.zhr-naji-hero-scan::after {

    box-shadow:

        0 0 35px rgba(216,188,122,.38),

        0 0 75px rgba(199,169,106,.34),

        0 0 130px rgba(169,132,74,.27),

        0 0 210px rgba(169,132,74,.18),

        0 0 320px rgba(169,132,74,.10);

}


/* ---------------------------------------------------------
   HERO ATMOSPHERE
   Bronze energy actually illuminates the environment
   --------------------------------------------------------- */

.zhr-naji-hero {

    background:

        radial-gradient(
            ellipse at 50% 45%,
            rgba(199,169,106,.16) 0%,
            rgba(169,132,74,.11) 18%,
            rgba(169,132,74,.065) 34%,
            rgba(169,132,74,.025) 52%,
            transparent 72%
        ),

        radial-gradient(
            ellipse at 50% 55%,
            rgba(216,188,122,.075) 0%,
            transparent 58%
        );

}


/* ---------------------------------------------------------
   CENTRAL BRONZE LIGHT BLOOM
   --------------------------------------------------------- */

.zhr-naji-hero::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 75vw;
    height: 75vw;

    transform: translate(-50%, -50%);

    max-width: 1050px;
    max-height: 1050px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(216,188,122,.075) 0%,
            rgba(199,169,106,.055) 18%,
            rgba(169,132,74,.035) 38%,
            transparent 70%
        );

    filter: blur(18px);

    pointer-events: none;

    z-index: 0;

}


/* ---------------------------------------------------------
   SECONDARY BRONZE LIGHT CLOUD
   --------------------------------------------------------- */

.zhr-naji-hero::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 38%;

    width: 55vw;
    height: 35vw;

    transform: translate(-50%, -50%);

    background:

        radial-gradient(
            ellipse,
            rgba(199,169,106,.09) 0%,
            rgba(169,132,74,.045) 32%,
            transparent 72%
        );

    filter: blur(35px);

    pointer-events: none;

    z-index: 0;

}


/* ---------------------------------------------------------
   KEEP HERO CONTENT ABOVE LIGHT
   --------------------------------------------------------- */

.zhr-naji-hero-container,
.zhr-naji-hero-copy,
.zhr-naji-hero-media,
.zhr-naji-hero-bottom {

    position: relative;

    z-index: 5;

}


/* ---------------------------------------------------------
   MOBILE — STILL VISIBLE, LESS SPREAD
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .zhr-naji-hero-scan {

        filter:
            drop-shadow(0 0 10px rgba(216,188,122,.65))
            drop-shadow(0 0 28px rgba(199,169,106,.45))
            drop-shadow(0 0 65px rgba(169,132,74,.28));

    }

    .zhr-naji-hero::before {

        width: 125vw;
        height: 125vw;

    }

    .zhr-naji-hero::after {

        width: 100vw;
        height: 65vw;

    }

}













/* =========================================================
   ZHR NAJI — PATCH 05
   INNER RADIATION ONLY
   DO NOT TOUCH THE ORBIT GEOMETRY
   ========================================================= */

/*
   IMPORTANT:
   This patch does NOT modify:
   ::before
   ::after
   width
   height
   position
   inset
   transform
   animation

   It only adds inward light to the EXISTING main orbit.
*/

.zhr-naji-hero-scan{

    box-shadow:

        /* ================================================
           EXISTING OUTER RADIATION — PATCH 04
           ================================================ */

        0 0 12px rgba(216,188,122,.72),
        0 0 32px rgba(199,169,106,.58),
        0 0 70px rgba(169,132,74,.42),
        0 0 125px rgba(169,132,74,.22),

        /* ================================================
           NEW — INWARD RADIATION ONLY
           ================================================ */

        inset 0 0 18px rgba(216,188,122,.18),
        inset 0 0 42px rgba(199,169,106,.12),
        inset 0 0 75px rgba(169,132,74,.075),
        inset 0 0 120px rgba(169,132,74,.035);
}




/* =========================================================
   ZHR NAJI — HERO ORBIT MOTION STOP
   Stop orbit animation only
   ========================================================= */

.zhr-naji-hero-scan,
.zhr-naji-hero-scan::before,
.zhr-naji-hero-scan::after{
    animation: none !important;
}






























/* =========================================================
   ZHR NAJI — PROTECTION PULSE SYSTEM
   STAGE 00 — MOTION FOUNDATION
   ========================================================= */

/* ---------------------------------------------------------
   01 — MOTION TOKENS
   --------------------------------------------------------- */

:root{

    --zhr-pulse-duration-fast: .45s;
    --zhr-pulse-duration: .75s;
    --zhr-pulse-duration-slow: 1.2s;

    --zhr-pulse-ease:
        cubic-bezier(.22,.61,.36,1);

    --zhr-pulse-ease-soft:
        cubic-bezier(.16,1,.3,1);

    --zhr-pulse-bronze:
        rgba(216,188,122,.78);

    --zhr-pulse-bronze-soft:
        rgba(199,169,106,.28);

    --zhr-pulse-blue:
        rgba(89,181,255,.72);

    --zhr-pulse-safe:
        rgba(114,197,141,.68);

    --zhr-pulse-warning:
        rgba(240,199,94,.68);

    --zhr-pulse-critical:
        rgba(240,106,95,.72);
}


/* ---------------------------------------------------------
   02 — GLOBAL MOTION SAFETY
   --------------------------------------------------------- */

.zhr-naji-main,
.zhr-naji-section,
.zhr-naji-section-container,
.zhr-naji-mission-card,
.zhr-naji-layer-grid article,
.zhr-naji-human-grid article,
.zhr-naji-intelligence-content article,
.zhr-naji-accessibility-grid article,
.zhr-naji-prevention-grid article,
.zhr-naji-trust-pillars article,
.zhr-naji-future-pillars article{

    will-change:
        auto;
}


/* ---------------------------------------------------------
   03 — IMPORTANT
   HERO ORBITS REMAIN COMPLETELY STATIC
   --------------------------------------------------------- */

.zhr-naji-hero-scan,
.zhr-naji-hero-scan::before,
.zhr-naji-hero-scan::after{

    animation:
        none !important;
}


/* ---------------------------------------------------------
   04 — NO GLOBAL ANIMATION
   The Protection Pulse System will be event-driven.
   --------------------------------------------------------- */

.zhr-naji-section *,
.zhr-naji-main *{

    animation-timing-function:
        var(--zhr-pulse-ease);

}


/* ---------------------------------------------------------
   05 — ACCESSIBILITY / REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){

    .zhr-naji-hero-scan,
    .zhr-naji-hero-scan::before,
    .zhr-naji-hero-scan::after,
    .zhr-naji-section *,
    .zhr-naji-main *{

        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;
    }
}









/* =========================================================
   ZHR NAJI — PROTECTION PULSE SYSTEM
   STAGE 01 — LIVING CARDS
   ========================================================= */

/* ---------------------------------------------------------
   CARD ACTIVATION BASE
   --------------------------------------------------------- */

.zhr-naji-mission-card,
.zhr-naji-layer-grid article,
.zhr-naji-human-grid article,
.zhr-naji-intelligence-content article,
.zhr-naji-accessibility-grid article,
.zhr-naji-prevention-grid article,
.zhr-naji-trust-pillars article,
.zhr-naji-future-pillars article{

    position:relative;
    overflow:hidden;

    opacity:0;

    transform:
        translateY(34px)
        scale(.965);

    transition:
        opacity .8s cubic-bezier(.16,1,.3,1),
        transform 1s cubic-bezier(.16,1,.3,1),
        border-color .6s ease,
        box-shadow .8s ease;

}


/* ---------------------------------------------------------
   ACTIVATED STATE
   --------------------------------------------------------- */

.zhr-naji-mission-card.zhr-pulse-active,
.zhr-naji-layer-grid article.zhr-pulse-active,
.zhr-naji-human-grid article.zhr-pulse-active,
.zhr-naji-intelligence-content article.zhr-pulse-active,
.zhr-naji-accessibility-grid article.zhr-pulse-active,
.zhr-naji-prevention-grid article.zhr-pulse-active,
.zhr-naji-trust-pillars article.zhr-pulse-active,
.zhr-naji-future-pillars article.zhr-pulse-active{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

    border-color:
        rgba(216,188,122,.58);

    box-shadow:

        0 2px 0 rgba(242,218,160,.15) inset,

        0 0 0 1px
        rgba(169,132,74,.08),

        0 28px 70px
        rgba(0,0,0,.58),

        0 0 42px
        rgba(169,132,74,.10);

}


/* ---------------------------------------------------------
   BRONZE SCAN LINE
   --------------------------------------------------------- */

.zhr-naji-mission-card::after,
.zhr-naji-layer-grid article::after,
.zhr-naji-human-grid article::after,
.zhr-naji-intelligence-content article::after,
.zhr-naji-accessibility-grid article::after,
.zhr-naji-prevention-grid article::after,
.zhr-naji-trust-pillars article::after,
.zhr-naji-future-pillars article::after{

    content:"";

    position:absolute;

    top:0;
    left:-35%;

    width:35%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(216,188,122,.18),
            rgba(255,239,194,.72),
            rgba(216,188,122,.18),
            transparent
        );

    filter:
        blur(4px);

    opacity:0;

    pointer-events:none;

    z-index:20;

}


/* ---------------------------------------------------------
   SCAN ACTIVATION
   --------------------------------------------------------- */

.zhr-naji-mission-card.zhr-pulse-scan::after,
.zhr-naji-layer-grid article.zhr-pulse-scan::after,
.zhr-naji-human-grid article.zhr-pulse-scan::after,
.zhr-naji-intelligence-content article.zhr-pulse-scan::after,
.zhr-naji-accessibility-grid article.zhr-pulse-scan::after,
.zhr-naji-prevention-grid article.zhr-pulse-scan::after,
.zhr-naji-trust-pillars article.zhr-pulse-scan::after,
.zhr-naji-future-pillars article.zhr-pulse-scan::after{

    opacity:1;

    animation:
        zhr-pulse-card-scan
        1.25s
        cubic-bezier(.16,1,.3,1)
        forwards;

}


@keyframes zhr-pulse-card-scan{

    0%{
        left:-35%;
        opacity:0;
    }

    12%{
        opacity:1;
    }

    75%{
        opacity:.85;
    }

    100%{
        left:105%;
        opacity:0;
    }

}


/* ---------------------------------------------------------
   INNER PROTECTION FRAME
   --------------------------------------------------------- */

.zhr-naji-mission-card::before,
.zhr-naji-layer-grid article::before,
.zhr-naji-human-grid article::before,
.zhr-naji-intelligence-content article::before,
.zhr-naji-accessibility-grid article::before,
.zhr-naji-prevention-grid article::before,
.zhr-naji-trust-pillars article::before,
.zhr-naji-future-pillars article::before{

    transition:
        opacity .7s ease,
        border-color .7s ease,
        box-shadow .7s ease;

}


/* ---------------------------------------------------------
   FRAME ACTIVATION
   --------------------------------------------------------- */

.zhr-naji-mission-card.zhr-pulse-active::before,
.zhr-naji-layer-grid article.zhr-pulse-active::before,
.zhr-naji-human-grid article.zhr-pulse-active::before,
.zhr-naji-intelligence-content article.zhr-pulse-active::before,
.zhr-naji-accessibility-grid article.zhr-pulse-active::before,
.zhr-naji-prevention-grid article.zhr-pulse-active::before,
.zhr-naji-trust-pillars article.zhr-pulse-active::before,
.zhr-naji-future-pillars article.zhr-pulse-active::before{

    border-color:
        rgba(216,188,122,.28);

    box-shadow:

        inset 0 0 24px
        rgba(169,132,74,.075),

        0 0 22px
        rgba(169,132,74,.055);

}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){

    .zhr-naji-mission-card,
    .zhr-naji-layer-grid article,
    .zhr-naji-human-grid article,
    .zhr-naji-intelligence-content article,
    .zhr-naji-accessibility-grid article,
    .zhr-naji-prevention-grid article,
    .zhr-naji-trust-pillars article,
    .zhr-naji-future-pillars article{

        opacity:1;
        transform:none;
        transition:none;
    }

}










/* =========================================================
   ZHR NAJI — PROTECTION PULSE SYSTEM
   STAGE 02 — PROTECTION FRAME PULSE
   ========================================================= */

/* ---------------------------------------------------------
   01 — PROTECTION FRAME
   --------------------------------------------------------- */

.zhr-naji-mission-card.zhr-pulse-active,
.zhr-naji-layer-grid article.zhr-pulse-active,
.zhr-naji-human-grid article.zhr-pulse-active,
.zhr-naji-intelligence-content article.zhr-pulse-active,
.zhr-naji-accessibility-grid article.zhr-pulse-active,
.zhr-naji-prevention-grid article.zhr-pulse-active,
.zhr-naji-trust-pillars article.zhr-pulse-active,
.zhr-naji-future-pillars article.zhr-pulse-active{

    isolation:isolate;
}


/* ---------------------------------------------------------
   02 — LIVING PROTECTION BORDER
   --------------------------------------------------------- */

.zhr-naji-mission-card.zhr-pulse-active > .zhr-pulse-frame,
.zhr-naji-layer-grid article.zhr-pulse-active > .zhr-pulse-frame,
.zhr-naji-human-grid article.zhr-pulse-active > .zhr-pulse-frame,
.zhr-naji-intelligence-content article.zhr-pulse-active > .zhr-pulse-frame,
.zhr-naji-accessibility-grid article.zhr-pulse-active > .zhr-pulse-frame,
.zhr-naji-prevention-grid article.zhr-pulse-active > .zhr-pulse-frame,
.zhr-naji-trust-pillars article.zhr-pulse-active > .zhr-pulse-frame,
.zhr-naji-future-pillars article.zhr-pulse-active > .zhr-pulse-frame{

    position:absolute;
    inset:0;

    pointer-events:none;

    border-radius:inherit;

    z-index:25;

    overflow:hidden;
}


/* ---------------------------------------------------------
   03 — FRAME LIGHT
   --------------------------------------------------------- */

.zhr-naji-mission-card.zhr-pulse-active::marker{
    display:none;
}


/* ---------------------------------------------------------
   04 — CARD EDGE PULSE
   Uses the existing pseudo-element without changing
   card geometry.
   --------------------------------------------------------- */

.zhr-naji-mission-card.zhr-pulse-active,
.zhr-naji-layer-grid article.zhr-pulse-active,
.zhr-naji-human-grid article.zhr-pulse-active,
.zhr-naji-intelligence-content article.zhr-pulse-active,
.zhr-naji-accessibility-grid article.zhr-pulse-active,
.zhr-naji-prevention-grid article.zhr-pulse-active,
.zhr-naji-trust-pillars article.zhr-pulse-active,
.zhr-naji-future-pillars article.zhr-pulse-active{

    --zhr-frame-alpha:.30;
}


/* ---------------------------------------------------------
   05 — MOVING LIGHT ON THE FRAME
   --------------------------------------------------------- */

.zhr-naji-mission-card.zhr-pulse-active::before,
.zhr-naji-layer-grid article.zhr-pulse-active::before,
.zhr-naji-human-grid article.zhr-pulse-active::before,
.zhr-naji-intelligence-content article.zhr-pulse-active::before,
.zhr-naji-accessibility-grid article.zhr-pulse-active::before,
.zhr-naji-prevention-grid article.zhr-pulse-active::before,
.zhr-naji-trust-pillars article.zhr-pulse-active::before,
.zhr-naji-future-pillars article.zhr-pulse-active::before{

    border-color:
        rgba(216,188,122,.28);

    box-shadow:
        inset 0 0 22px
        rgba(169,132,74,.07);

}


/* ---------------------------------------------------------
   06 — PERIODIC PROTECTION PULSE
   --------------------------------------------------------- */

.zhr-naji-mission-card.zhr-pulse-active,
.zhr-naji-layer-grid article.zhr-pulse-active,
.zhr-naji-human-grid article.zhr-pulse-active,
.zhr-naji-intelligence-content article.zhr-pulse-active,
.zhr-naji-accessibility-grid article.zhr-pulse-active,
.zhr-naji-prevention-grid article.zhr-pulse-active,
.zhr-naji-trust-pillars article.zhr-pulse-active,
.zhr-naji-future-pillars article.zhr-pulse-active{

    animation:
        zhr-protection-breath
        6.5s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   07 — VERY SUBTLE SYSTEM BREATH
   --------------------------------------------------------- */

@keyframes zhr-protection-breath{

    0%,
    100%{

        box-shadow:
            0 2px 0 rgba(242,218,160,.12) inset,
            0 0 0 1px rgba(169,132,74,.06),
            0 28px 70px rgba(0,0,0,.55),
            0 0 28px rgba(169,132,74,.045);
    }

    50%{

        box-shadow:
            0 2px 0 rgba(242,218,160,.20) inset,
            0 0 0 1px rgba(199,169,106,.13),
            0 28px 72px rgba(0,0,0,.58),
            0 0 48px rgba(169,132,74,.11);
    }
}


/* ---------------------------------------------------------
   08 — HOVER OVERRIDES THE PULSE
   --------------------------------------------------------- */

.zhr-naji-mission-card.zhr-pulse-active:hover,
.zhr-naji-layer-grid article.zhr-pulse-active:hover,
.zhr-naji-human-grid article.zhr-pulse-active:hover,
.zhr-naji-intelligence-content article.zhr-pulse-active:hover,
.zhr-naji-accessibility-grid article.zhr-pulse-active:hover,
.zhr-naji-prevention-grid article.zhr-pulse-active:hover,
.zhr-naji-trust-pillars article.zhr-pulse-active:hover,
.zhr-naji-future-pillars article.zhr-pulse-active:hover{

    animation:none;

}


/* ---------------------------------------------------------
   09 — REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

    .zhr-naji-mission-card.zhr-pulse-active,
    .zhr-naji-layer-grid article.zhr-pulse-active,
    .zhr-naji-human-grid article.zhr-pulse-active,
    .zhr-naji-intelligence-content article.zhr-pulse-active,
    .zhr-naji-accessibility-grid article.zhr-pulse-active,
    .zhr-naji-prevention-grid article.zhr-pulse-active,
    .zhr-naji-trust-pillars article.zhr-pulse-active,
    .zhr-naji-future-pillars article.zhr-pulse-active{

        animation:none;
    }

}







/* =========================================================
   ZHR NAJI — PROTECTION PULSE SYSTEM
   STAGE 03 — EMERGENCY SIGNAL FLOW
   ========================================================= */

.zhr-naji-emergency-step{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}


/* ---------------------------------------------------------
   ACTIVE SIGNAL CORE
   --------------------------------------------------------- */

.zhr-naji-emergency-step::after{

    content:"";

    position:absolute;

    width:7px;
    height:7px;

    top:50%;
    left:0;

    transform:
        translate(-50%,-50%)
        scale(.6);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #F4D58C 0%,
            #D8BC7A 38%,
            #A9844A 68%,
            transparent 72%
        );

    box-shadow:

        0 0 8px
        rgba(216,188,122,.95),

        0 0 20px
        rgba(199,169,106,.62),

        0 0 38px
        rgba(169,132,74,.32);

    opacity:0;

    pointer-events:none;

    z-index:10;
}


/* ---------------------------------------------------------
   SIGNAL ACTIVATES WHEN STEP ENTERS VIEW
   --------------------------------------------------------- */

.zhr-naji-emergency-step.zhr-pulse-active::after{

    opacity:1;

    animation:
        zhr-emergency-signal
        1.7s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


@keyframes zhr-emergency-signal{

    0%{

        left:0;

        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(.55);
    }

    12%{

        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(1);
    }

    70%{

        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(1.15);
    }

    100%{

        left:100%;

        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(.65);
    }
}


/* ---------------------------------------------------------
   SIGNAL TRAIL
   --------------------------------------------------------- */

.zhr-naji-emergency-step::before{

    content:"";

    position:absolute;

    left:0;
    right:0;

    top:50%;

    height:1px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(169,132,74,.08) 20%,
            rgba(199,169,106,.16) 50%,
            rgba(169,132,74,.08) 80%,
            transparent 100%
        );

    opacity:.35;

    pointer-events:none;

    z-index:1;
}


/* ---------------------------------------------------------
   ACTIVE STEP EMPHASIS
   --------------------------------------------------------- */

.zhr-naji-emergency-step.zhr-pulse-active{

    border-color:
        rgba(216,188,122,.38);

    box-shadow:

        0 0 0 1px
        rgba(169,132,74,.06),

        0 0 28px
        rgba(169,132,74,.07);
}


/* ---------------------------------------------------------
   CRITICAL STEP — RESPOND / RESCUE
   --------------------------------------------------------- */

.zhr-naji-emergency-step:nth-child(5).zhr-pulse-active::after,
.zhr-naji-emergency-step:nth-child(6).zhr-pulse-active::after{

    background:
        radial-gradient(
            circle,
            #FFF0D0 0%,
            #F0C75E 30%,
            #D6A52E 62%,
            transparent 72%
        );

    box-shadow:

        0 0 9px
        rgba(240,199,94,.95),

        0 0 22px
        rgba(214,165,46,.60),

        0 0 42px
        rgba(214,165,46,.30);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:700px){

    .zhr-naji-emergency-step::after{

        width:6px;
        height:6px;
    }

    .zhr-naji-emergency-step.zhr-pulse-active::after{

        animation-duration:1.35s;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

    .zhr-naji-emergency-step.zhr-pulse-active::after{

        animation:none;
    }
}








/* =========================================================
   ZHR NAJI — PHILOSOPHY / PROTECTION AWAKENING
   Independent visual system
   ========================================================= */

.zhr-naji-philosophy{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    background:
        radial-gradient(
            ellipse at 50% 35%,
            rgba(199,169,106,.12),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            rgba(34,23,13,.98),
            rgba(24,16,9,.98)
        );
}


/* ---------------------------------------------------------
   ATMOSPHERIC PROTECTION FIELD
   --------------------------------------------------------- */

.zhr-naji-philosophy::before{
    content:"";
    position:absolute;
    inset:-20%;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(216,188,122,.075),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 65%,
            rgba(169,132,74,.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 35%,
            rgba(35,136,216,.035),
            transparent 30%
        );

    filter:blur(28px);

    pointer-events:none;
    z-index:-2;
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.zhr-naji-philosophy
.zhr-naji-section-heading{
    position:relative;
    z-index:3;

    transform:
        translateY(28px)
        scale(.97);

    opacity:0;

    transition:
        opacity 1s cubic-bezier(.16,1,.3,1),
        transform 1.1s cubic-bezier(.16,1,.3,1);
}

.zhr-naji-philosophy.zhr-philosophy-awake
.zhr-naji-section-heading{
    opacity:1;
    transform:none;
}


/* ---------------------------------------------------------
   MAIN PHILOSOPHY SURFACE
   --------------------------------------------------------- */

.zhr-naji-philosophy-layout{
    position:relative;

    display:grid;
    grid-template-columns:
        minmax(0,1.15fr)
        minmax(320px,.85fr);

    gap:clamp(40px,6vw,100px);

    align-items:stretch;

    perspective:1600px;
}


/* ---------------------------------------------------------
   LEFT PHILOSOPHY FIELD
   --------------------------------------------------------- */

.zhr-naji-philosophy-copy{
    position:relative;

    padding:
        clamp(28px,4vw,54px);

    border:
        1px solid rgba(199,169,106,.22);

    border-radius:30px;

    background:
        linear-gradient(
            145deg,
            rgba(87,61,33,.72),
            rgba(38,27,17,.84) 48%,
            rgba(8,20,29,.88)
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.52),
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 0 55px rgba(169,132,74,.055);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    transform:
        translateY(45px)
        rotateX(4deg)
        scale(.97);

    opacity:0;

    transition:
        opacity 1.1s cubic-bezier(.16,1,.3,1),
        transform 1.2s cubic-bezier(.16,1,.3,1);

    overflow:hidden;
}

.zhr-naji-philosophy.zhr-philosophy-awake
.zhr-naji-philosophy-copy{
    opacity:1;

    transform:
        translateY(0)
        rotateX(0)
        scale(1);
}


/* Internal glass frame */

.zhr-naji-philosophy-copy::before{
    content:"";

    position:absolute;
    inset:10px;

    border:
        1px solid rgba(216,188,122,.13);

    border-radius:23px;

    box-shadow:
        inset 0 0 35px rgba(216,188,122,.025);

    pointer-events:none;
}


/* moving bronze reflection */

.zhr-naji-philosophy-copy::after{
    content:"";

    position:absolute;

    top:-20%;
    left:-55%;

    width:35%;
    height:140%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,235,180,.18),
            rgba(216,188,122,.07),
            transparent
        );

    transform:skewX(-18deg);

    opacity:0;

    pointer-events:none;
}

.zhr-naji-philosophy.zhr-philosophy-awake
.zhr-naji-philosophy-copy::after{
    opacity:1;

    animation:
        zhr-philosophy-glass-sweep
        1.8s
        cubic-bezier(.16,1,.3,1)
        .25s
        forwards;
}

@keyframes zhr-philosophy-glass-sweep{

    0%{
        left:-55%;
    }

    100%{
        left:125%;
    }
}


/* ---------------------------------------------------------
   FOUR PROTECTION PRINCIPLES
   --------------------------------------------------------- */

.zhr-naji-principle-list{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:14px;

    margin-top:34px;
}


.zhr-naji-principle{
    position:relative;

    min-height:105px;

    display:flex;
    align-items:center;

    padding:24px;

    border:
        1px solid rgba(199,169,106,.18);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(100,72,39,.54),
            rgba(38,29,20,.72)
        );

    box-shadow:
        0 16px 35px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.035);

    overflow:hidden;

    transform:
        translateY(25px)
        scale(.96);

    opacity:0;

    transition:
        opacity .7s cubic-bezier(.16,1,.3,1),
        transform .8s cubic-bezier(.16,1,.3,1),
        border-color .4s ease,
        box-shadow .4s ease;
}


.zhr-naji-philosophy.zhr-philosophy-awake
.zhr-naji-principle{
    opacity:1;
    transform:none;
}


.zhr-naji-philosophy.zhr-philosophy-awake
.zhr-naji-principle:nth-child(1){
    transition-delay:.25s;
}

.zhr-naji-philosophy.zhr-philosophy-awake
.zhr-naji-principle:nth-child(2){
    transition-delay:.38s;
}

.zhr-naji-philosophy.zhr-philosophy-awake
.zhr-naji-principle:nth-child(3){
    transition-delay:.51s;
}

.zhr-naji-philosophy.zhr-philosophy-awake
.zhr-naji-principle:nth-child(4){
    transition-delay:.64s;
}


/* animated protection line */

.zhr-naji-principle::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(216,188,122,.85),
            transparent
        );

    box-shadow:
        0 0 16px rgba(216,188,122,.35);

    transform:scaleY(.2);
    transform-origin:center;

    transition:
        transform .7s cubic-bezier(.16,1,.3,1);
}


.zhr-naji-principle:hover{
    transform:
        translateY(-7px)
        translateZ(15px);

    border-color:
        rgba(216,188,122,.48);

    box-shadow:
        0 25px 55px rgba(0,0,0,.48),
        0 0 30px rgba(169,132,74,.08),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.zhr-naji-principle:hover::before{
    transform:scaleY(1);
}


.zhr-naji-principle strong{
    position:relative;
    z-index:2;

    color:
        var(--zhr-bronze-gold-bright);

    font-size:
        clamp(15px,1.1vw,19px);

    letter-spacing:
        .18em;

    text-shadow:
        0 0 20px rgba(216,188,122,.15);
}


/* ---------------------------------------------------------
   PROTECTION HIGHLIGHT
   --------------------------------------------------------- */

.zhr-naji-highlight{
    position:relative;

    margin-top:38px;

    padding-left:22px;

    color:
        var(--zhr-white);

    letter-spacing:.06em;

    font-size:
        clamp(18px,1.6vw,27px);

    font-weight:500;
}


.zhr-naji-highlight::before{
    content:"";

    position:absolute;

    left:0;
    top:10%;
    bottom:10%;

    width:2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--zhr-bronze-gold-bright),
            transparent
        );

    box-shadow:
        0 0 18px rgba(216,188,122,.45);
}


/* ---------------------------------------------------------
   MISSION CORE
   --------------------------------------------------------- */

.zhr-naji-philosophy-mission{
    position:relative;

    min-height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:
        clamp(34px,4vw,62px);

    border:
        1px solid rgba(216,188,122,.34);

    border-radius:32px;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(216,188,122,.13),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(72,50,27,.88),
            rgba(25,22,18,.94) 55%,
            rgba(5,15,23,.96)
        );

    box-shadow:
        0 40px 100px rgba(0,0,0,.58),
        0 0 60px rgba(169,132,74,.08),
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 0 70px rgba(169,132,74,.045);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    transform:
        translateY(55px)
        rotateY(-5deg)
        scale(.96);

    opacity:0;

    transition:
        opacity 1.25s cubic-bezier(.16,1,.3,1),
        transform 1.35s cubic-bezier(.16,1,.3,1);

    overflow:hidden;
}


.zhr-naji-philosophy.zhr-philosophy-awake
.zhr-naji-philosophy-mission{
    opacity:1;

    transform:
        translateY(0)
        rotateY(0)
        scale(1);
}


.zhr-naji-philosophy-mission::before{
    content:"";

    position:absolute;

    width:240px;
    height:240px;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(216,188,122,.16),
            rgba(169,132,74,.07) 35%,
            transparent 70%
        );

    filter:blur(8px);

    animation:
        zhr-mission-breathe
        5.5s
        ease-in-out
        infinite;

    pointer-events:none;
}


@keyframes zhr-mission-breathe{

    0%,100%{
        opacity:.45;
        transform:
            translate(-50%,-50%)
            scale(.82);
    }

    50%{
        opacity:.9;
        transform:
            translate(-50%,-50%)
            scale(1.08);
    }
}


.zhr-naji-mission-label{
    position:relative;
    z-index:2;

    color:
        var(--zhr-bronze-gold);

    font-size:11px;
    letter-spacing:.28em;

    margin-bottom:24px;
}


.zhr-naji-philosophy-mission h3{
    position:relative;
    z-index:2;

    color:
        var(--zhr-white);

    font-size:
        clamp(30px,3vw,52px);

    line-height:1.05;

    margin:0 0 24px;
}


.zhr-naji-philosophy-mission p{
    position:relative;
    z-index:2;

    color:
        var(--zhr-text-soft);

    max-width:430px;

    line-height:1.8;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:900px){

    .zhr-naji-philosophy-layout{
        grid-template-columns:1fr;
    }

    .zhr-naji-philosophy-mission{
        min-height:420px;
    }
}


@media(max-width:600px){

    .zhr-naji-principle-list{
        grid-template-columns:1fr;
    }

    .zhr-naji-philosophy-copy,
    .zhr-naji-philosophy-mission{
        border-radius:22px;
        padding:26px;
    }

    .zhr-naji-principle{
        min-height:82px;
    }
                      }





























/* =========================================================
   ZHR NAJI — HERO MEDIA + PROTECTION RAIL
   FIX
   ========================================================= */


/* =========================================================
   HERO IMAGE
   ========================================================= */

.zhr-naji-hero-media{

    position:relative !important;

    display:block !important;

    width:
        min(48vw, 720px) !important;

    height:
        min(48vw, 720px) !important;

    min-height:
        420px !important;

    margin:0 !important;

    flex:0 0 auto;

    background-image:
        url("images/zhr-naji-hero13.png") !important;

    background-repeat:no-repeat !important;

    background-position:center center !important;

    background-size:contain !important;

    background-color:transparent !important;

    opacity:1 !important;

    visibility:visible !important;

    z-index:8 !important;

    pointer-events:none;
}


/* =========================================================
   HERO CONTAINER
   ========================================================= */

.zhr-naji-hero-container{

    position:relative;

    z-index:5;

    display:flex !important;

    align-items:center;

    justify-content:space-between;

    gap:
        clamp(35px,5vw,100px);

    width:100%;

}


/* =========================================================
   HERO COPY
   ========================================================= */

.zhr-naji-hero-copy{

    position:relative;

    z-index:10;

    flex:1 1 48%;

}


/* =========================================================
   HERO MEDIA AREA
   ========================================================= */

.zhr-naji-hero-media{

    flex:1 1 52%;

    max-width:720px;

}


/* =========================================================
   PROTECTION RAIL
   DETECT → ASSESS → WARN → PROTECT → RESPOND → RESCUE
   ========================================================= */

.zhr-naji-hero-bottom{

    position:relative !important;

    z-index:20 !important;

    display:flex !important;

    align-items:center;

    justify-content:center;

    gap:
        clamp(18px,3vw,58px);

    width:100%;

    min-height:60px;

    margin-top:30px;

    padding:
        18px 20px;

    opacity:1 !important;

    visibility:visible !important;

    color:
        rgba(216,188,122,.82);

    font-size:
        11px;

    font-weight:600;

    letter-spacing:
        .24em;

    text-transform:uppercase;

}


/* =========================================================
   RAIL ITEMS
   ========================================================= */

.zhr-naji-hero-bottom span{

    position:relative;

    display:block;

    opacity:1 !important;

    visibility:visible !important;

    color:
        rgba(216,188,122,.78);

    white-space:nowrap;

    text-shadow:
        0 0 14px rgba(169,132,74,.12);

    transition:
        color .4s ease,
        text-shadow .4s ease,
        transform .4s ease;
}


/* =========================================================
   PROTECTION POINT BETWEEN STEPS
   ========================================================= */

.zhr-naji-hero-bottom span:not(:last-child)::after{

    content:"";

    position:absolute;

    width:4px;
    height:4px;

    border-radius:50%;

    right:
        calc(clamp(18px,3vw,58px) / -2);

    top:50%;

    transform:
        translate(50%,-50%);

    background:
        #C7A96A;

    box-shadow:
        0 0 8px rgba(216,188,122,.65),
        0 0 18px rgba(169,132,74,.22);
}


/* =========================================================
   ACTIVE / HOVER
   ========================================================= */

.zhr-naji-hero-bottom span:hover{

    color:
        #F0D99A;

    transform:
        translateY(-2px);

    text-shadow:
        0 0 12px rgba(216,188,122,.45),
        0 0 28px rgba(169,132,74,.18);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

    .zhr-naji-hero-container{

        flex-direction:column;

        align-items:center;

        text-align:center;
    }

    .zhr-naji-hero-copy{

        width:100%;
    }

    .zhr-naji-hero-media{

        width:
            min(90vw,620px) !important;

        height:
            min(90vw,620px) !important;

        min-height:
            300px !important;
    }

    .zhr-naji-hero-bottom{

        gap:14px;

        flex-wrap:wrap;

        font-size:9px;

        letter-spacing:.16em;
    }

    .zhr-naji-hero-bottom
    span:not(:last-child)::after{

        display:none;
    }
}


@media(max-width:560px){

    .zhr-naji-hero-media{

        width:94vw !important;

        height:94vw !important;

        min-height:260px !important;
    }

    .zhr-naji-hero-bottom{

        display:grid !important;

        grid-template-columns:
            repeat(3,1fr);

        gap:12px;

        text-align:center;
    }
}

















/* ================================================================
   ZHR NAJI
   DIVINE GLASS MONUMENT
   PREMIUM 3D GLASS / PROTECTION CHAMBER
   ================================================================ */


/* ================================================================
   01 — LOCAL DESIGN TOKENS
   ================================================================ */

.zhr-divine-glass-section{

    --divine-bronze:#A9844A;
    --divine-bronze-light:#D8BC7A;
    --divine-bronze-soft:#C7A96A;
    --divine-bronze-deep:#72552F;

    --divine-blue:#2388D8;
    --divine-blue-light:#59B5FF;
    --divine-blue-soft:#7AC7FF;

    --divine-white:#F4F5F3;
    --divine-white-soft:#D9DDDC;
    --divine-text:#C9CDCC;
    --divine-muted:#858D90;

    --divine-glass:
        rgba(238,243,241,.035);

    --divine-glass-deep:
        rgba(7,12,15,.36);

    --divine-glass-edge:
        rgba(226,232,230,.22);

    --divine-glass-highlight:
        rgba(255,255,255,.48);

    --divine-shadow:
        rgba(0,0,0,.72);

    --divine-radius:34px;

    position:relative;
    isolation:isolate;

    padding-top:clamp(90px,9vw,170px);
    padding-bottom:clamp(90px,10vw,180px);

    overflow:hidden;
}


/* ================================================================
   02 — SECTION ATMOSPHERE
   ================================================================ */

.zhr-divine-glass-section::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:min(1100px,92vw);
    height:min(1100px,92vw);

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(199,169,106,.085) 0%,
            rgba(169,132,74,.045) 25%,
            rgba(35,136,216,.018) 48%,
            transparent 72%
        );

    filter:blur(35px);

    pointer-events:none;

    z-index:-2;
}


.zhr-divine-glass-section::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(199,169,106,.018) 30%,
            transparent 50%,
            rgba(35,136,216,.012) 72%,
            transparent 100%
        );

    pointer-events:none;

    z-index:-1;
}


/* ================================================================
   03 — MAIN GLASS MONUMENT
   ================================================================ */

.zhr-divine-glass{

    position:relative;

    width:min(1120px,calc(100% - 36px));

    margin:0 auto;

    isolation:isolate;

    transform-style:preserve-3d;

    border-radius:var(--divine-radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055) 0%,
            rgba(255,255,255,.018) 22%,
            rgba(12,17,20,.20) 48%,
            rgba(3,8,11,.34) 100%
        );

    border:1px solid rgba(226,232,230,.20);

    box-shadow:

        /* upper glass reflection */
        0 1px 0 rgba(255,255,255,.35) inset,

        /* bronze lower reflection */
        0 -1px 0 rgba(199,169,106,.16) inset,

        /* depth */
        0 35px 90px rgba(0,0,0,.64),

        /* ambient bronze */
        0 0 100px rgba(169,132,74,.08),

        /* outer dark separation */
        0 0 0 1px rgba(0,0,0,.38);

    backdrop-filter:
        blur(24px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(125%);

    overflow:hidden;

    transition:
        transform 1s cubic-bezier(.16,1,.3,1),
        box-shadow 1s cubic-bezier(.16,1,.3,1),
        border-color .8s ease;
}


/* subtle monument lift */

.zhr-divine-glass:hover{

    transform:
        translateY(-5px)
        perspective(1800px)
        rotateX(.35deg);

    border-color:
        rgba(216,188,122,.34);

    box-shadow:

        0 1px 0 rgba(255,255,255,.42) inset,

        0 -1px 0 rgba(216,188,122,.20) inset,

        0 45px 110px rgba(0,0,0,.72),

        0 0 110px rgba(169,132,74,.12),

        0 0 0 1px rgba(199,169,106,.08);
}


/* ================================================================
   04 — GLASS ATMOSPHERE
   ================================================================ */

.zhr-divine-glass-atmosphere{

    position:absolute;

    inset:-25%;

    z-index:-5;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse at 18% 12%,
            rgba(216,188,122,.10),
            transparent 27%
        ),

        radial-gradient(
            ellipse at 82% 28%,
            rgba(89,181,255,.065),
            transparent 26%
        ),

        radial-gradient(
            ellipse at 50% 92%,
            rgba(169,132,74,.08),
            transparent 35%
        );

    filter:blur(30px);

    opacity:.85;
}


/* ================================================================
   05 — DEEP SHADOW / FLOATING GLASS
   ================================================================ */

.zhr-divine-glass-shadow{

    position:absolute;

    left:7%;
    right:7%;
    bottom:-34px;

    height:80px;

    z-index:-6;

    background:
        radial-gradient(
            ellipse,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.48) 38%,
            transparent 72%
        );

    filter:blur(22px);

    transform:
        translateZ(-40px)
        scaleX(.88);

    pointer-events:none;
}


/* ================================================================
   06 — REAL GLASS BODY
   ================================================================ */

.zhr-divine-glass-body{

    position:absolute;

    inset:0;

    z-index:0;

    border-radius:inherit;

    overflow:hidden;

    pointer-events:none;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.065) 0%,
            rgba(255,255,255,.018) 16%,
            rgba(255,255,255,.006) 42%,
            rgba(0,0,0,.035) 70%,
            rgba(0,0,0,.12) 100%
        );

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,.055),

        inset 0 30px 80px rgba(255,255,255,.018),

        inset 0 -50px 100px rgba(0,0,0,.16);
}


.zhr-divine-glass-body-inner{

    position:absolute;

    inset:1px;

    border-radius:inherit;

    background:

        radial-gradient(
            ellipse at 50% 0%,
            rgba(255,255,255,.055),
            transparent 42%
        ),

        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            rgba(0,0,0,.06)
        );

    opacity:.72;
}


/* ================================================================
   07 — GLASS THICKNESS
   ================================================================ */

.zhr-divine-glass-thickness{

    position:absolute;

    inset:0;

    z-index:2;

    border-radius:inherit;

    pointer-events:none;

    transform:translateZ(-2px);

    box-shadow:

        inset 0 0 0 2px rgba(255,255,255,.055),

        inset 0 0 0 4px rgba(169,132,74,.035),

        inset 0 -16px 28px rgba(0,0,0,.16),

        inset 0 16px 26px rgba(255,255,255,.035);
}


/* ================================================================
   08 — GLASS EDGE / THICKNESS LIGHT
   ================================================================ */

.zhr-divine-glass-edge{

    position:absolute;

    inset:1px;

    z-index:8;

    border-radius:calc(var(--divine-radius) - 1px);

    pointer-events:none;

    border:1px solid rgba(255,255,255,.17);

    box-shadow:

        0 1px 0 rgba(255,255,255,.32) inset,

        0 -1px 0 rgba(199,169,106,.14) inset,

        1px 0 0 rgba(255,255,255,.055) inset,

        -1px 0 0 rgba(216,188,122,.08) inset;
}


/* ================================================================
   09 — PRIMARY GLASS REFLECTION
   ================================================================ */

.zhr-divine-glass-reflection{

    position:absolute;

    top:-25%;
    left:-30%;

    width:72%;
    height:155%;

    z-index:4;

    pointer-events:none;

    transform:
        rotate(21deg)
        translateZ(8px);

    background:

        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.015) 34%,
            rgba(255,255,255,.11) 47%,
            rgba(216,188,122,.09) 51%,
            rgba(255,255,255,.025) 58%,
            transparent 72%
        );

    filter:
        blur(3px)
        drop-shadow(0 0 18px rgba(216,188,122,.06));

    opacity:.72;

    mix-blend-mode:screen;

    animation:
        zhr-divine-glass-sweep 13s
        cubic-bezier(.16,1,.3,1)
        infinite;
}


/* ================================================================
   10 — SECONDARY BLUE REFLECTION
   ================================================================ */

.zhr-divine-glass-reflection-secondary{

    position:absolute;

    right:-20%;
    top:8%;

    width:52%;
    height:80%;

    z-index:3;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse,
            rgba(89,181,255,.075) 0%,
            rgba(35,136,216,.035) 28%,
            transparent 70%
        );

    filter:blur(18px);

    transform:
        rotate(-12deg)
        translateZ(5px);

    opacity:.65;

    mix-blend-mode:screen;

    animation:
        zhr-divine-blue-breathe 7s
        ease-in-out
        infinite;
}


/* ================================================================
   11 — INTERNAL LIGHT
   ================================================================ */

.zhr-divine-glass-light{

    position:absolute;

    left:50%;
    top:12%;

    width:62%;
    height:46%;

    transform:
        translateX(-50%)
        translateZ(6px);

    z-index:3;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse,
            rgba(216,188,122,.075) 0%,
            rgba(199,169,106,.038) 32%,
            rgba(89,181,255,.018) 48%,
            transparent 72%
        );

    filter:blur(24px);

    opacity:.78;

    animation:
        zhr-divine-light-breathe
        8s
        ease-in-out
        infinite;
}


/* ================================================================
   12 — PROTECTION SIGNAL
   ================================================================ */

.zhr-divine-glass-signal{

    position:absolute;

    top:0;
    left:0;

    width:2px;
    height:100%;

    z-index:9;

    pointer-events:none;

    background:

        linear-gradient(
            180deg,
            transparent 0%,
            rgba(216,188,122,.0) 16%,
            rgba(216,188,122,.65) 42%,
            rgba(89,181,255,.42) 50%,
            rgba(216,188,122,.65) 58%,
            rgba(216,188,122,0) 84%,
            transparent 100%
        );

    filter:
        blur(.3px)
        drop-shadow(0 0 12px rgba(216,188,122,.45))
        drop-shadow(0 0 28px rgba(35,136,216,.16));

    opacity:.22;

    transform:
        translateX(0);

    animation:
        zhr-divine-signal-sweep
        9s
        cubic-bezier(.16,1,.3,1)
        infinite;
}


/* ================================================================
   13 — CONTENT CHAMBER
   ================================================================ */

.zhr-divine-glass-content{

    position:relative;

    z-index:12;

    padding:
        clamp(55px,7vw,105px)
        clamp(28px,7vw,100px)
        clamp(50px,7vw,90px);

    color:var(--divine-text);

    text-align:left;
}


/* ================================================================
   14 — SACRED INTRO
   ================================================================ */

.zhr-divine-intro{

    position:relative;

    max-width:820px;

    margin:0 auto;

    padding-bottom:clamp(42px,5vw,70px);

    text-align:center;

    isolation:isolate;
}


.zhr-divine-intro-line{

    width:74px;
    height:1px;

    margin:0 auto 28px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--divine-bronze-light),
            transparent
        );

    box-shadow:
        0 0 14px rgba(216,188,122,.28);
}


.zhr-divine-kicker{

    margin:0 0 20px;

    color:var(--divine-bronze-light);

    font-size:
        clamp(9px,1vw,11px);

    font-weight:700;

    letter-spacing:.30em;

    text-transform:uppercase;

    text-shadow:
        0 0 18px rgba(216,188,122,.16);
}


.zhr-divine-title{

    margin:0;

    color:var(--divine-white);

    font-size:
        clamp(32px,5vw,68px);

    line-height:.98;

    font-weight:500;

    letter-spacing:-.045em;

    text-wrap:balance;

    text-shadow:
        0 2px 20px rgba(0,0,0,.42),
        0 0 32px rgba(255,255,255,.035);
}


.zhr-divine-subtitle-main{

    margin:
        18px
        0
        0;

    color:var(--divine-bronze-light);

    font-size:
        clamp(22px,3vw,38px);

    line-height:1.1;

    font-weight:500;

    letter-spacing:-.025em;

    text-shadow:
        0 0 28px rgba(199,169,106,.17);
}


.zhr-divine-intro-description{

    max-width:650px;

    margin:
        25px
        auto
        0;

    color:
        rgba(228,230,228,.68);

    font-size:
        clamp(13px,1.3vw,16px);

    line-height:1.9;

    letter-spacing:.015em;
}


/* ================================================================
   15 — MESSAGE CORE
   ================================================================ */

.zhr-divine-message{

    position:relative;

    max-width:820px;

    margin:0 auto;

    padding:
        clamp(34px,5vw,65px)
        clamp(20px,4vw,50px);

    border-top:
        1px solid rgba(216,188,122,.13);

    border-bottom:
        1px solid rgba(216,188,122,.10);

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            transparent 22%,
            transparent 78%,
            rgba(169,132,74,.018)
        );

    box-shadow:

        0 1px 0 rgba(255,255,255,.04) inset,

        0 -1px 0 rgba(0,0,0,.25) inset;
}


/* ================================================================
   16 — ENGLISH TYPOGRAPHY
   ================================================================ */

.zhr-divine-language{

    position:relative;

    color:
        rgba(228,230,228,.78);

    font-size:
        clamp(14px,1.35vw,17px);

    line-height:2;

    letter-spacing:.008em;
}


.zhr-divine-language p{

    margin:
        0 0
        1.35em;
}


.zhr-divine-language p:last-child{

    margin-bottom:0;
}


.zhr-divine-english{

    text-align:left;
}


.zhr-divine-english p{

    max-width:760px;
}


/* ================================================================
   17 — DIVINE EMPHASIS
   ================================================================ */

.zhr-divine-emphasis{

    position:relative;

    margin-top:2em !important;
    margin-bottom:2em !important;

    padding:
        20px 25px;

    color:
        rgba(244,245,243,.96);

    background:

        linear-gradient(
            90deg,
            rgba(169,132,74,.065),
            rgba(255,255,255,.018),
            transparent
        );

    border-left:
        1px solid rgba(216,188,122,.48);

    box-shadow:
        0 0 30px rgba(169,132,74,.045);

    text-shadow:
        0 0 22px rgba(216,188,122,.09);
}


.zhr-divine-final-line{

    color:var(--divine-bronze-light);

    font-size:
        clamp(16px,1.6vw,20px);

    font-weight:600;

    letter-spacing:.025em;
}


/* ================================================================
   18 — LANGUAGE DIVIDER
   ================================================================ */

.zhr-divine-language-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin:
        clamp(45px,6vw,75px)
        auto;

    opacity:.78;
}


.zhr-divine-language-divider span{

    display:block;

    width:
        clamp(40px,8vw,100px);

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(199,169,106,.34)
        );
}


.zhr-divine-language-divider span:last-child{

    background:
        linear-gradient(
            90deg,
            rgba(199,169,106,.34),
            transparent
        );
}


.zhr-divine-language-divider i{

    display:block;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #F4D58C 0%,
            #D8BC7A 40%,
            #A9844A 68%,
            transparent 72%
        );

    box-shadow:

        0 0 8px rgba(216,188,122,.85),
        0 0 22px rgba(199,169,106,.42);

    animation:
        zhr-divine-dot-pulse
        3.8s
        ease-in-out
        infinite;
}


/* ================================================================
   19 — PERSIAN MESSAGE
   ================================================================ */

.zhr-divine-persian{

    text-align:right;

    color:
        rgba(224,226,225,.78);

    line-height:2.15;

    font-size:
        clamp(15px,1.45vw,18px);

    letter-spacing:0;

    font-family:
        "Vazirmatn",
        "IRANSans",
        "Tahoma",
        sans-serif;
}


.zhr-divine-persian-label{

    display:block;

    margin-bottom:28px;

    color:
        var(--divine-bronze-light);

    font-size:11px;

    font-weight:700;

    letter-spacing:.16em;

    opacity:.82;
}


.zhr-divine-persian h4{

    margin:
        0 0
        28px;

    color:
        var(--divine-white);

    font-size:
        clamp(22px,2.7vw,34px);

    line-height:1.5;

    font-weight:500;
}


.zhr-divine-persian p{

    margin:
        0 0
        1.45em;
}


.zhr-divine-short-emphasis{

    color:
        var(--divine-bronze-light);

    font-size:
        clamp(18px,2vw,24px);

    font-weight:600;

    text-shadow:
        0 0 22px rgba(216,188,122,.12);
}


/* ================================================================
   20 — LARGE PERSIAN EMPHASIS
   ================================================================ */

.zhr-divine-emphasis-large{

    position:relative;

    margin:
        42px 0 !important;

    padding:
        28px 32px;

    color:
        rgba(244,245,243,.97);

    font-size:
        clamp(18px,2vw,25px);

    line-height:2;

    background:

        linear-gradient(
            90deg,
            rgba(169,132,74,.075),
            rgba(255,255,255,.018),
            rgba(35,136,216,.018)
        );

    border-right:
        2px solid rgba(216,188,122,.58);

    border-top:
        1px solid rgba(216,188,122,.10);

    border-bottom:
        1px solid rgba(216,188,122,.08);

    box-shadow:

        0 18px 50px rgba(0,0,0,.20),

        0 0 35px rgba(169,132,74,.045);
}


/* ================================================================
   21 — FINAL SEAL
   ================================================================ */

.zhr-divine-seal{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

    margin:
        clamp(55px,7vw,90px)
        auto
        0;

    text-align:center;

    color:var(--divine-bronze-light);

    flex-wrap:wrap;
}


.zhr-divine-seal-line{

    width:
        clamp(45px,9vw,130px);

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(216,188,122,.38),
            transparent
        );

    box-shadow:
        0 0 12px rgba(216,188,122,.14);
}


.zhr-divine-seal p{

    width:100%;

    margin:0;

    font-size:
        clamp(11px,1vw,13px);

    font-weight:700;

    letter-spacing:.26em;

    text-shadow:
        0 0 18px rgba(216,188,122,.15);
}


.zhr-divine-seal small{

    width:100%;

    margin-top:-10px;

    color:
        rgba(201,205,204,.54);

    font-size:
        clamp(9px,.9vw,11px);

    letter-spacing:.20em;
}


/* ================================================================
   22 — MICRO GLASS TEXT REFLECTION
   ================================================================ */

.zhr-divine-intro,
.zhr-divine-message,
.zhr-divine-seal{

    transform:
        translateZ(18px);

    transform-style:preserve-3d;
}


/* ================================================================
   23 — ANIMATIONS
   ================================================================ */

@keyframes zhr-divine-glass-sweep{

    0%{
        transform:
            translateX(-70%)
            rotate(21deg)
            translateZ(8px);

        opacity:0;
    }

    12%{
        opacity:.65;
    }

    50%{
        opacity:.72;
    }

    82%{
        opacity:.42;
    }

    100%{
        transform:
            translateX(170%)
            rotate(21deg)
            translateZ(8px);

        opacity:0;
    }
}


@keyframes zhr-divine-blue-breathe{

    0%,
    100%{
        opacity:.38;
        transform:
            rotate(-12deg)
            scale(.94)
            translateZ(5px);
    }

    50%{
        opacity:.72;
        transform:
            rotate(-12deg)
            scale(1.05)
            translateZ(5px);
    }
}


@keyframes zhr-divine-light-breathe{

    0%,
    100%{
        opacity:.42;
        transform:
            translateX(-50%)
            scale(.92)
            translateZ(6px);
    }

    50%{
        opacity:.82;
        transform:
            translateX(-50%)
            scale(1.06)
            translateZ(6px);
    }
}


@keyframes zhr-divine-signal-sweep{

    0%{
        left:3%;
        opacity:0;
    }

    12%{
        opacity:.18;
    }

    42%{
        opacity:.48;
    }

    58%{
        opacity:.26;
    }

    100%{
        left:97%;
        opacity:0;
    }
}


@keyframes zhr-divine-dot-pulse{

    0%,
    100%{
        transform:scale(.75);
        opacity:.55;
    }

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


/* ================================================================
   24 — DESKTOP PREMIUM DEPTH
   ================================================================ */

@media (min-width:1100px){

    .zhr-divine-glass{

        transform:
            perspective(1800px)
            rotateX(.25deg);

    }

    .zhr-divine-glass-content{

        padding-left:
            clamp(70px,9vw,125px);

        padding-right:
            clamp(70px,9vw,125px);
    }

}


/* ================================================================
   25 — TABLET
   ================================================================ */

@media (max-width:900px){

    .zhr-divine-glass{

        width:
            min(94%,1120px);

        border-radius:28px;
    }

    .zhr-divine-glass-content{

        padding:
            65px
            45px
            60px;
    }

}


/* ================================================================
   26 — MOBILE
   ================================================================ */

@media (max-width:640px){

    .zhr-divine-glass-section{

        padding-top:70px;
        padding-bottom:80px;
    }


    .zhr-divine-glass{

        width:
            calc(100% - 22px);

        border-radius:23px;

        backdrop-filter:
            blur(16px)
            saturate(115%);

        -webkit-backdrop-filter:
            blur(16px)
            saturate(115%);
    }


    .zhr-divine-glass-content{

        padding:
            48px
            21px
            48px;
    }


    .zhr-divine-title{

        font-size:
            clamp(31px,10vw,48px);
    }


    .zhr-divine-subtitle-main{

        font-size:
            clamp(21px,6vw,30px);
    }


    .zhr-divine-intro-description{

        font-size:13px;

        line-height:1.8;
    }


    .zhr-divine-message{

        padding:
            30px 8px;
    }


    .zhr-divine-language{

        font-size:14px;

        line-height:1.95;
    }


    .zhr-divine-persian{

        font-size:15px;

        line-height:2.05;
    }


    .zhr-divine-emphasis{

        padding:
            18px 17px;
    }


    .zhr-divine-emphasis-large{

        padding:
            22px 19px;
    }


    .zhr-divine-glass-reflection{

        opacity:.38;

        animation-duration:17s;
    }


    .zhr-divine-glass-signal{

        opacity:.14;
    }

}


/* ================================================================
   27 — REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion:reduce){

    .zhr-divine-glass,
    .zhr-divine-glass-reflection,
    .zhr-divine-glass-reflection-secondary,
    .zhr-divine-glass-light,
    .zhr-divine-glass-signal,
    .zhr-divine-language-divider i{

        animation:none !important;

        transition:none !important;
    }

}

















/* ================================================================
   ZHR DIVINE GLASS — MAXIMUM WIDTH / MAXIMUM 3D PRESENCE
   OVERRIDE PATCH
   ================================================================ */

.zhr-divine-glass-section{
    overflow:visible !important;
}


/* ================================================================
   01 — USE ALMOST THE ENTIRE AVAILABLE WIDTH
   ================================================================ */

.zhr-divine-glass-section .zhr-naji-section-container{
    width:100% !important;
    max-width:none !important;
    padding-left:clamp(8px,1.5vw,28px) !important;
    padding-right:clamp(8px,1.5vw,28px) !important;
}


.zhr-divine-glass{

    width:
        min(98vw, 1680px) !important;

    max-width:
        1680px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    border-radius:
        clamp(30px,2.8vw,46px) !important;

    transform-style:preserve-3d !important;

    transform:
        perspective(2400px)
        translateZ(0)
        rotateX(.35deg)
        scale(1.002) !important;

    border:
        1px solid rgba(235,240,238,.30) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075) 0%,
            rgba(255,255,255,.025) 17%,
            rgba(15,20,23,.16) 38%,
            rgba(5,10,13,.27) 68%,
            rgba(3,7,10,.38) 100%
        ) !important;

    box-shadow:

        /* glass top edge */
        0 2px 0 rgba(255,255,255,.42) inset,

        /* glass lower edge */
        0 -3px 0 rgba(199,169,106,.20) inset,

        /* side thickness */
        2px 0 0 rgba(255,255,255,.08) inset,
        -2px 0 0 rgba(216,188,122,.09) inset,

        /* deep internal glass */
        0 0 0 2px rgba(255,255,255,.035) inset,
        0 0 0 5px rgba(169,132,74,.025) inset,

        /* floating depth */
        0 25px 0 -8px rgba(15,11,7,.92),

        0 42px 0 -15px rgba(5,7,9,.96),

        /* main shadow */
        0 55px 120px rgba(0,0,0,.78),

        /* contact shadow */
        0 85px 150px rgba(0,0,0,.48),

        /* bronze ambient */
        0 0 110px rgba(169,132,74,.12),

        /* blue ambient */
        0 0 80px rgba(35,136,216,.045) !important;

    backdrop-filter:
        blur(28px)
        saturate(135%) !important;

    -webkit-backdrop-filter:
        blur(28px)
        saturate(135%) !important;

    overflow:hidden !important;
}


/* ================================================================
   02 — MASSIVE GLASS THICKNESS
   ================================================================ */

.zhr-divine-glass-thickness{

    inset:-1px !important;

    border-radius:
        inherit !important;

    box-shadow:

        inset 0 0 0 2px rgba(255,255,255,.075),

        inset 0 0 0 4px rgba(216,188,122,.045),

        inset 0 18px 38px rgba(255,255,255,.045),

        inset 0 -24px 50px rgba(0,0,0,.26),

        inset 18px 0 42px rgba(255,255,255,.018),

        inset -18px 0 42px rgba(169,132,74,.025),

        0 0 45px rgba(169,132,74,.06) !important;
}


/* ================================================================
   03 — EXTRAORDINARY GLASS EDGE
   ================================================================ */

.zhr-divine-glass-edge{

    inset:2px !important;

    border-radius:
        calc(clamp(30px,2.8vw,46px) - 2px) !important;

    border:
        1px solid rgba(242,246,244,.30) !important;

    box-shadow:

        0 1px 0 rgba(255,255,255,.55) inset,

        0 2px 12px rgba(255,255,255,.06) inset,

        0 -2px 0 rgba(216,188,122,.22) inset,

        1px 0 0 rgba(255,255,255,.10) inset,

        -1px 0 0 rgba(216,188,122,.12) inset,

        0 0 0 1px rgba(0,0,0,.20) !important;
}


/* ================================================================
   04 — STRONGER INTERNAL GLASS VOLUME
   ================================================================ */

.zhr-divine-glass-body{

    background:

        radial-gradient(
            ellipse at 50% -8%,
            rgba(255,255,255,.095) 0%,
            rgba(255,255,255,.035) 26%,
            transparent 52%
        ),

        radial-gradient(
            ellipse at 12% 48%,
            rgba(216,188,122,.035),
            transparent 38%
        ),

        radial-gradient(
            ellipse at 88% 60%,
            rgba(35,136,216,.028),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.060),
            rgba(255,255,255,.012) 30%,
            rgba(4,9,12,.20) 70%,
            rgba(0,0,0,.30)
        ) !important;

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,.075),

        inset 0 30px 90px rgba(255,255,255,.025),

        inset 0 -70px 120px rgba(0,0,0,.22) !important;
}


/* ================================================================
   05 — MUCH STRONGER REFLECTION
   ================================================================ */

.zhr-divine-glass-reflection{

    opacity:.95 !important;

    filter:
        blur(2px)
        drop-shadow(0 0 22px rgba(216,188,122,.12))
        drop-shadow(0 0 55px rgba(169,132,74,.08)) !important;
}


.zhr-divine-glass-reflection-secondary{

    opacity:.85 !important;

    filter:
        blur(14px)
        drop-shadow(0 0 25px rgba(89,181,255,.12)) !important;
}


/* ================================================================
   06 — STRONGER TOP LIGHT
   ================================================================ */

.zhr-divine-glass-light{

    width:78% !important;
    height:55% !important;

    opacity:.95 !important;

    filter:
        blur(28px)
        drop-shadow(0 0 35px rgba(216,188,122,.10)) !important;
}


/* ================================================================
   07 — CONTENT GETS MORE ROOM
   ================================================================ */

.zhr-divine-glass-content{

    padding-left:
        clamp(32px,7vw,125px) !important;

    padding-right:
        clamp(32px,7vw,125px) !important;

    padding-top:
        clamp(65px,7vw,115px) !important;

    padding-bottom:
        clamp(65px,7vw,105px) !important;
}


/* ================================================================
   08 — MESSAGE CHAMBER ALSO WIDER
   ================================================================ */

.zhr-divine-message{

    max-width:
        1050px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-left:
        clamp(18px,3vw,55px) !important;

    padding-right:
        clamp(18px,3vw,55px) !important;
}


/* ================================================================
   09 — STRONGER FLOATING SHADOW
   ================================================================ */

.zhr-divine-glass-shadow{

    left:3% !important;
    right:3% !important;

    bottom:-48px !important;

    height:105px !important;

    filter:blur(28px) !important;

    opacity:.95 !important;

    transform:
        translateZ(-60px)
        scaleX(.94) !important;
}


/* ================================================================
   10 — PREMIUM HOVER DEPTH
   ================================================================ */

@media (hover:hover){

    .zhr-divine-glass:hover{

        transform:
            perspective(2400px)
            translateY(-10px)
            translateZ(16px)
            rotateX(.55deg)
            scale(1.004) !important;

        border-color:
            rgba(216,188,122,.42) !important;

        box-shadow:

            0 2px 0 rgba(255,255,255,.48) inset,

            0 -3px 0 rgba(216,188,122,.24) inset,

            2px 0 0 rgba(255,255,255,.10) inset,
            -2px 0 0 rgba(216,188,122,.12) inset,

            0 28px 0 -8px rgba(15,11,7,.94),

            0 48px 0 -15px rgba(5,7,9,.98),

            0 68px 145px rgba(0,0,0,.84),

            0 100px 180px rgba(0,0,0,.52),

            0 0 140px rgba(169,132,74,.16),

            0 0 95px rgba(35,136,216,.06) !important;
    }

}


/* ================================================================
   11 — LARGE DESKTOP
   ================================================================ */

@media (min-width:1400px){

    .zhr-divine-glass-section .zhr-naji-section-container{

        padding-left:20px !important;
        padding-right:20px !important;
    }

    .zhr-divine-glass{

        width:
            min(97vw,1680px) !important;
    }

}


/* ================================================================
   12 — VERY LARGE SCREENS
   ================================================================ */

@media (min-width:1800px){

    .zhr-divine-glass{

        width:
            min(94vw,1780px) !important;

        max-width:
            1780px !important;
    }

}


/* ================================================================
   13 — MOBILE SAFETY
   ================================================================ */

@media (max-width:640px){

    .zhr-divine-glass-section .zhr-naji-section-container{

        padding-left:7px !important;
        padding-right:7px !important;
    }

    .zhr-divine-glass{

        width:
            calc(100vw - 14px) !important;

        max-width:none !important;

        border-radius:24px !important;

        transform:
            none !important;
    }

    .zhr-divine-glass:hover{

        transform:
            translateY(-3px) !important;
    }

                 }








/* ================================================================
   ZHR DIVINE GLASS — SYMMETRY / NO HORIZONTAL OVERFLOW
   FINAL WIDTH CORRECTION
   ================================================================ */

/* ---------- GLOBAL WIDTH CONTROL ---------- */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
}

.zhr-naji-section,
.zhr-divine-glass-section{
    width:100%;
    max-width:100%;
    overflow-x:clip !important;
}


/* ---------- SECTION CONTAINER ---------- */

.zhr-divine-glass-section .zhr-naji-section-container{

    width:100% !important;
    max-width:none !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding-left:
        clamp(12px,2vw,32px) !important;

    padding-right:
        clamp(12px,2vw,32px) !important;

    box-sizing:border-box !important;
}


/* ---------- THE GLASS CARD ---------- */

.zhr-divine-glass{

    /* مهم‌ترین اصلاح */
    width:
        100% !important;

    max-width:
        1680px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    box-sizing:border-box !important;

    /* جلوگیری از بزرگ‌تر شدن به‌خاطر transform */
    transform-origin:center center !important;
}


/* ---------- INNER BOXES MUST NEVER EXPAND THE CARD ---------- */

.zhr-divine-glass,
.zhr-divine-glass *,
.zhr-divine-glass::before,
.zhr-divine-glass::after{

    box-sizing:border-box;
}


/* ---------- SHADOW STAYS INSIDE THE VISUAL FIELD ---------- */

.zhr-divine-glass-shadow{

    left:4% !important;
    right:4% !important;

    width:auto !important;

    transform:
        translateZ(-60px)
        scaleX(.92) !important;
}


/* ---------- LARGE DESKTOP ---------- */

@media (min-width:1400px){

    .zhr-divine-glass-section .zhr-naji-section-container{

        padding-left:
            clamp(18px,2vw,40px) !important;

        padding-right:
            clamp(18px,2vw,40px) !important;
    }

    .zhr-divine-glass{

        width:
            100% !important;

        max-width:
            1680px !important;
    }
}


/* ---------- VERY LARGE DESKTOP ---------- */

@media (min-width:1800px){

    .zhr-divine-glass{

        width:
            100% !important;

        max-width:
            1780px !important;
    }
}


/* ---------- TABLET ---------- */

@media (max-width:900px){

    .zhr-divine-glass-section .zhr-naji-section-container{

        padding-left:14px !important;
        padding-right:14px !important;
    }

    .zhr-divine-glass{

        width:100% !important;
        max-width:none !important;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width:640px){

    .zhr-divine-glass-section .zhr-naji-section-container{

        padding-left:8px !important;
        padding-right:8px !important;
    }

    .zhr-divine-glass{

        width:100% !important;
        max-width:none !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }
}