/* ============================================================
   BEDEEL UI_03 R4
   PUBLIC HOME / VISUAL RICHNESS
   ============================================================ */

/* ============================================================
   BUSINESS PULSE
   ============================================================ */

.np4-r4-pulse{
    margin-top:2px;
}

.np4-r4-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-bottom:13px;
}

.np4-r4-section-heading small{
    display:block;

    color:#778ffc;

    font-size:7px;
    font-weight:900;
    letter-spacing:.16em;
}

.np4-r4-section-heading h2{
    margin:5px 0 0;

    font-size:20px;
    line-height:1.1;

    letter-spacing:-.03em;
}

.np4-r4-section-heading>a{
    color:#89858a;

    font-size:8px;
    font-weight:750;
}

.np4-r4-section-heading>a:hover{
    color:#fff;
}

.np4-r4-pulse-grid{
    display:grid;

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

    gap:10px;
}

.np4-r4-pulse-card{
    position:relative;

    min-height:176px;

    display:flex;
    flex-direction:column;

    padding:15px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);
    border-radius:17px;

    background:
        linear-gradient(
            155deg,
            #141418,
            #0d0d10
        );

    box-shadow:
        0 15px 40px rgba(0,0,0,.16);
}

.np4-r4-pulse-card::after{
    content:"";

    position:absolute;

    width:125px;
    height:125px;

    right:-60px;
    top:-60px;

    border-radius:50%;

    pointer-events:none;
}

.np4-r4-pulse-card.is-blue::after{
    background:
        radial-gradient(
            circle,
            rgba(79,134,247,.22),
            transparent 68%
        );
}

.np4-r4-pulse-card.is-teal::after{
    background:
        radial-gradient(
            circle,
            rgba(56,189,168,.20),
            transparent 68%
        );
}

.np4-r4-pulse-card.is-violet::after{
    background:
        radial-gradient(
            circle,
            rgba(155,123,234,.20),
            transparent 68%
        );
}

.np4-r4-pulse-icon{
    width:35px;
    height:35px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:15px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;

    font-size:13px;
}

.np4-r4-pulse-card.is-blue .np4-r4-pulse-icon{
    color:#72a0ff;
    background:rgba(79,134,247,.12);
}

.np4-r4-pulse-card.is-teal .np4-r4-pulse-icon{
    color:#52cfba;
    background:rgba(56,189,168,.11);
}

.np4-r4-pulse-card.is-violet .np4-r4-pulse-icon{
    color:#b294f2;
    background:rgba(155,123,234,.11);
}

.np4-r4-pulse-card>span{
    margin-bottom:6px;

    font-size:6px;
    font-weight:900;
    letter-spacing:.16em;
}

.np4-r4-pulse-card.is-blue>span{
    color:#72a0ff;
}

.np4-r4-pulse-card.is-teal>span{
    color:#52cfba;
}

.np4-r4-pulse-card.is-violet>span{
    color:#b294f2;
}

.np4-r4-pulse-card>strong{
    max-width:150px;

    font-size:11px;
    line-height:1.3;

    letter-spacing:-.018em;
}

.np4-r4-pulse-card>p{
    margin:
        8px
        0
        13px;

    color:#7e7a80;

    font-size:7px;
    line-height:1.48;
}

.np4-r4-pulse-card>div:last-child{
    display:flex;
    align-items:baseline;

    gap:5px;

    margin-top:auto;
}

.np4-r4-pulse-card>div:last-child>b{
    font-size:18px;
    line-height:1;
}

.np4-r4-pulse-card>div:last-child>small{
    color:#68656b;

    font-size:7px;
}

/* ============================================================
   PULSE PHOTO
   ============================================================ */

.np4-r4-pulse-visual{
    position:relative;

    min-height:176px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.09);
    border-radius:17px;

    background:#111114;

    box-shadow:
        0 15px 40px rgba(0,0,0,.18);
}

.np4-r4-pulse-visual>img{
    width:100%;
    height:100%;

    position:absolute;
    inset:0;

    object-fit:cover;

    filter:
        saturate(.82)
        brightness(.72)
        contrast(1.04);

    transition:
        transform .35s ease,
        filter .35s ease;
}

.np4-r4-pulse-visual:hover>img{
    transform:scale(1.025);

    filter:
        saturate(.95)
        brightness(.77)
        contrast(1.04);
}

.np4-r4-pulse-visual>span{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(7,7,9,.91),
            rgba(7,7,9,.54) 60%,
            rgba(7,7,9,.20)
        ),
        linear-gradient(
            0deg,
            rgba(7,7,9,.55),
            transparent
        );
}

.np4-r4-pulse-visual>div{
    position:absolute;

    z-index:2;

    left:16px;
    right:16px;
    bottom:16px;
}

.np4-r4-pulse-visual small{
    display:block;

    margin-bottom:7px;

    color:#f0af5d;

    font-size:6px;
    font-weight:900;
    letter-spacing:.16em;
}

.np4-r4-pulse-visual strong{
    display:block;

    max-width:190px;

    color:#fff;

    font-size:13px;
    line-height:1.25;

    letter-spacing:-.02em;
}

.np4-r4-pulse-visual em{
    display:block;

    margin-top:12px;

    color:#d5d2d0;

    font-size:7px;
    font-style:normal;
    font-weight:750;
}

/* ============================================================
   LEFT BUSINESS NETWORK CARD
   ============================================================ */

.np4-r4-company-network{
    padding-bottom:14px !important;
}

.np4-r4-company-network .np4-left-cta-art{
    height:132px !important;

    background:
        linear-gradient(
            180deg,
            rgba(6,7,9,.06),
            rgba(7,7,9,.88)
        ),
        url("/assets/bedeel/public/office.jpg")
        center / cover
        no-repeat !important;
}

.np4-r4-company-kicker{
    position:relative;
    z-index:2;

    margin:
        0
        15px
        7px;

    color:#6e9cfb;

    font-size:6px;
    font-weight:900;
    letter-spacing:.15em;
}

.np4-r4-network-nodes{
    position:absolute;
    inset:0;

    display:block;
}

.np4-r4-network-nodes span{
    position:absolute;

    width:9px;
    height:9px;

    border:2px solid rgba(255,255,255,.60);
    border-radius:50%;

    box-shadow:
        0 0 0 5px rgba(255,255,255,.05);
}

.np4-r4-network-nodes span:nth-child(1){
    left:24%;
    top:28%;

    border-color:#6b9bff;
}

.np4-r4-network-nodes span:nth-child(2){
    right:28%;
    top:22%;

    border-color:#52cdb8;
}

.np4-r4-network-nodes span:nth-child(3){
    left:38%;
    bottom:20%;

    border-color:#f0af59;
}

.np4-r4-network-nodes span:nth-child(4){
    right:16%;
    bottom:29%;

    border-color:#aa8cf1;
}

.np4-r4-company-stats{
    position:relative;
    z-index:2;

    display:grid;

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

    gap:7px;

    margin:
        13px
        15px;
}

.np4-r4-company-stats>span{
    display:flex;
    flex-direction:column;

    gap:2px;

    padding:
        8px
        9px;

    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;

    background:#151519;
}

.np4-r4-company-stats b{
    color:#fff;

    font-size:13px;
}

.np4-r4-company-stats small{
    color:#77737a;

    font-size:6px;
}

/* ============================================================
   RIGHT SIGNALS
   ============================================================ */

.np4-r4-signals{
    padding:15px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(155,123,234,.07),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #111114,
            #0c0c0f
        );

    box-shadow:
        0 17px 45px rgba(0,0,0,.15);
}

.np4-r4-signals>header{
    padding-bottom:11px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}

.np4-r4-signals>header small{
    display:block;

    color:#a286ed;

    font-size:6px;
    font-weight:900;
    letter-spacing:.15em;
}

.np4-r4-signals>header strong{
    display:block;

    margin-top:5px;

    font-size:11px;
}

.np4-r4-signals>a{
    min-height:54px;

    display:grid;

    grid-template-columns:
        10px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:10px;

    border-bottom:
        1px solid rgba(255,255,255,.055);
}

.np4-r4-signals>a:last-child{
    border-bottom:0;
}

.np4-r4-signals>a>i{
    width:8px;
    height:8px;

    border-radius:50%;
}

.np4-r4-signals>a>i.is-blue{
    background:#568afb;

    box-shadow:
        0 0 0 5px rgba(79,134,247,.08);
}

.np4-r4-signals>a>i.is-amber{
    background:#eeb158;

    box-shadow:
        0 0 0 5px rgba(237,174,85,.08);
}

.np4-r4-signals>a>i.is-teal{
    background:#3ec0aa;

    box-shadow:
        0 0 0 5px rgba(56,189,168,.08);
}

.np4-r4-signals>a span{
    min-width:0;
}

.np4-r4-signals>a strong{
    display:block;

    font-size:8px;
}

.np4-r4-signals>a small{
    display:block;

    margin-top:3px;

    overflow:hidden;

    color:#716e74;

    font-size:6px;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.np4-r4-signals>a>b{
    min-width:25px;

    padding:
        4px
        6px;

    border-radius:7px;

    color:#aaa6ae;

    background:#18181c;

    font-size:7px;
    text-align:center;
}

/* ============================================================
   OPPORTUNITY BANNER
   ============================================================ */

.np4-r4-opportunity-banner{
    position:relative;

    min-height:240px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.09);
    border-radius:21px;

    background:#101013;

    box-shadow:
        0 22px 60px rgba(0,0,0,.18);
}

.np4-r4-opportunity-banner>img{
    width:100%;
    height:100%;

    position:absolute;
    inset:0;

    object-fit:cover;

    filter:
        saturate(.76)
        brightness(.65)
        contrast(1.06);
}

.np4-r4-opportunity-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(7,7,9,.96),
            rgba(7,7,9,.73) 46%,
            rgba(7,7,9,.28) 78%
        ),
        linear-gradient(
            0deg,
            rgba(7,7,9,.55),
            transparent
        );
}

.np4-r4-opportunity-banner>div{
    position:relative;
    z-index:2;

    max-width:455px;

    padding:
        35px
        30px;
}

.np4-r4-opportunity-banner small{
    display:block;

    margin-bottom:10px;

    color:#52cbb6;

    font-size:7px;
    font-weight:900;
    letter-spacing:.16em;
}

.np4-r4-opportunity-banner strong{
    display:block;

    color:#fff;

    font-size:25px;
    line-height:1.05;

    letter-spacing:-.04em;
}

.np4-r4-opportunity-banner p{
    max-width:350px;

    margin:
        13px
        0
        18px;

    color:#aaa7ab;

    font-size:9px;
    line-height:1.55;
}

.np4-r4-opportunity-banner a{
    display:inline-flex;

    align-items:center;

    min-height:35px;

    padding:
        0
        13px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:9px;

    color:#fff;

    background:
        rgba(255,255,255,.055);

    font-size:8px;
    font-weight:800;

    backdrop-filter:blur(10px);
}

.np4-r4-opportunity-banner a:hover{
    border-color:
        rgba(56,189,168,.30);

    background:
        rgba(56,189,168,.10);
}

/* ============================================================
   COLOR BALANCE
   ============================================================ */

.np4-main{
    position:relative;
}

.np4-stories::before{
    content:"";

    position:absolute;

    width:240px;
    height:240px;

    left:-120px;
    top:-80px;

    border-radius:50%;

    opacity:.35;

    pointer-events:none;

    background:
        radial-gradient(
            circle,
            rgba(79,134,247,.06),
            transparent 70%
        );
}

.np4-post:nth-child(1){
    border-color:
        rgba(237,174,85,.16) !important;
}

.np4-post:nth-child(2){
    border-color:
        rgba(56,189,168,.15) !important;
}

.np4-post:nth-child(3){
    border-color:
        rgba(155,123,234,.16) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1320px){

    .np4-r4-pulse-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .np4-r4-pulse-visual{
        grid-column:
            1 / -1;

        min-height:150px;
    }
}

@media(max-width:900px){

    .np4-r4-pulse-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .np4-r4-pulse-visual{
        grid-column:
            auto;
    }
}

@media(max-width:620px){

    .np4-r4-section-heading{
        align-items:flex-start;
        flex-direction:column;

        gap:8px;
    }

    .np4-r4-pulse-grid{
        display:flex;

        overflow-x:auto;

        padding-bottom:5px;
    }

    .np4-r4-pulse-card,
    .np4-r4-pulse-visual{
        width:235px;
        min-width:235px;
    }

    .np4-r4-opportunity-banner{
        min-height:310px;
    }

    .np4-r4-opportunity-banner>div{
        padding:
            28px
            20px;
    }

    .np4-r4-opportunity-banner strong{
        font-size:22px;
    }
}

/* ============================================================
   SIGNATURE
   ============================================================ */

html::after{
    content:"BEDEEL_UI03_R4_PUBLIC";
    display:none;
}