/* =========================================================
   PREMIUM HERO — BRAND EXPERIENCE
   ========================================================= */

.hero.bh-c10e-hero{

    position:
        relative;

    isolation:
        isolate;

    max-width:
        1260px;

    margin-top:
        90px;

    padding:
        clamp(52px,7vw,88px)
        24px
        clamp(46px,6vw,76px);

    overflow:
        hidden;

    border:
        1px solid
        rgba(80,170,235,.10);

    border-radius:
        34px;

    background:

        radial-gradient(
            circle at 14% 18%,
            rgba(32,236,240,.08),
            transparent 28%
        ),

        radial-gradient(
            circle at 82% 8%,
            rgba(115,62,253,.10),
            transparent 31%
        ),

        radial-gradient(
            circle at 80% 88%,
            rgba(245,197,30,.045),
            transparent 28%
        ),

        linear-gradient(
            145deg,
            rgba(7,17,32,.93),
            rgba(5,11,24,.88)
        );

    box-shadow:
        0 32px 85px
        rgba(0,0,0,.22),
        inset 0 1px 0
        rgba(255,255,255,.025);
}


.hero.bh-c10e-hero::before{

    content:"";

    position:absolute;

    inset:
        0;

    z-index:
        -2;

    opacity:
        .21;

    background-image:

        linear-gradient(
            rgba(39,185,253,.055)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(115,62,253,.045)
            1px,
            transparent 1px
        );

    background-size:
        46px 46px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.50),
            transparent 83%
        );
}


.hero.bh-c10e-hero::after{

    content:"";

    position:absolute;

    width:
        440px;

    height:
        440px;

    left:
        calc(50% - 220px);

    top:
        -310px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(32,236,240,.15);

    box-shadow:
        0 0 100px
        rgba(32,236,240,.06);

    pointer-events:none;

    z-index:-1;
}


/* =========================================================
   BRAND BADGE
   ========================================================= */

.hero.bh-c10e-hero
.hero-company-badge{

    position:
        relative;

    overflow:
        hidden;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        18px;

    padding:
        7px 13px;

    border:
        1px solid
        rgba(32,236,240,.20);

    border-radius:
        999px;

    background:
        linear-gradient(
            100deg,
            rgba(32,236,240,.055),
            rgba(115,62,253,.055)
        );

    color:
        #dffbff;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.045),
        0 10px 30px
        rgba(0,0,0,.13);

    font-size:
        10px;

    font-weight:
        950;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.hero.bh-c10e-hero
.hero-company-badge::after{

    content:"";

    position:absolute;

    top:-20%;

    bottom:-20%;

    left:-60px;

    width:45px;

    transform:
        skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    animation:
        bhC10eBadgeSweep
        5.2s
        ease-in-out
        infinite;
}


@keyframes bhC10eBadgeSweep{

    0%,
    62%{
        left:-70px;
    }

    100%{
        left:calc(100% + 70px);
    }

}


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

.hero.bh-c10e-hero
h1{

    max-width:
        1080px;

    margin:
        0 auto 22px !important;

    font-size:
        clamp(
            42px,
            6vw,
            78px
        ) !important;

    line-height:
        .99 !important;

    letter-spacing:
        -.045em;

    font-weight:
        950 !important;

    background:
        none !important;

    -webkit-text-fill-color:
        initial !important;

    color:
        #f4f9ff !important;

    text-wrap:
        balance;
}


.bh-c10e-title-line{

    display:
        block;

    position:
        relative;

    width:
        fit-content;

    max-width:
        100%;

    margin:
        0 auto;
}


.bh-c10e-title-smart{

    background:
        linear-gradient(
            100deg,
            #dffffc 0%,
            #60f8a0 25%,
            #20ecf0 72%,
            #27b9fd 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


.bh-c10e-title-platform{

    margin-top:
        3px;

    background:
        linear-gradient(
            100deg,
            #20ecf0 0%,
            #27b9fd 29%,
            #1c54e5 58%,
            #733efd 100%
        );

    background-size:
        180% 100%;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    animation:
        bhC10eTitleFlow
        7s
        ease-in-out
        infinite alternate;
}


.bh-c10e-title-business{

    margin-top:
        7px;

    font-size:
        .68em;

    line-height:
        1.07;

    letter-spacing:
        -.025em;

    background:
        linear-gradient(
            100deg,
            #f5c51e,
            #f69b25,
            #ff775d
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


@keyframes bhC10eTitleFlow{

    from{
        background-position:
            0% 50%;
    }

    to{
        background-position:
            100% 50%;
    }

}


/* Generic fallback if Admin changes title */

.bh-c10e-title-generic{

    background:
        linear-gradient(
            100deg,
            #60f8a0,
            #20ecf0,
            #27b9fd,
            #733efd,
            #f5c51e
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


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

.hero.bh-c10e-hero
.hero-subtitle{

    max-width:
        840px;

    margin:
        0 auto 25px;

    color:
        #aabdd0 !important;

    font-size:
        clamp(
            14px,
            1.35vw,
            17px
        ) !important;

    line-height:
        1.7 !important;
}


/* =========================================================
   CMS CAPABILITY RIBBON
   ========================================================= */

.bh-c10e-hero-ribbon{

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    max-width:
        900px;

    margin:
        -8px auto 23px;
}


.bh-c10e-hero-ribbon span{

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        5px 9px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:
        999px;

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

    color:
        #8fa7bc;

    font-size:
        9.5px;

    font-weight:
        800;
}


.bh-c10e-hero-ribbon span::before{

    content:"";

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #20ecf0;

    box-shadow:
        0 0 9px
        rgba(32,236,240,.50);
}


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

.hero.bh-c10e-hero
.hero-actions{

    position:
        relative;

    z-index:
        4;

    gap:
        10px;

    justify-content:
        center;
}


.hero.bh-c10e-hero
.hero-actions a,
.hero.bh-c10e-hero
.hero-actions button{

    min-height:
        46px;

    border-radius:
        13px !important;

    font-size:
        12px !important;

    font-weight:
        900 !important;

    backdrop-filter:
        blur(14px);
}


/* =========================================================
   LIVE PROJECT BUILD STORY
   ========================================================= */

#bhavya-premium-custom-showcase
.bh-c9-stage{

    overflow:
        visible;
}


.bh-c10e-live-build{

    position:
        absolute;

    inset:
        8px 0 4px;

    z-index:
        15;

    overflow:
        hidden;

    border:
        1px solid
        rgba(39,185,253,.17);

    border-radius:
        22px;

    background:

        radial-gradient(
            circle at 80% 5%,
            rgba(115,62,253,.12),
            transparent 31%
        ),

        radial-gradient(
            circle at 8% 92%,
            rgba(32,236,240,.07),
            transparent 29%
        ),

        linear-gradient(
            145deg,
            rgba(7,18,34,.985),
            rgba(5,11,24,.99)
        );

    box-shadow:
        0 30px 72px
        rgba(0,0,0,.33),
        inset 0 1px 0
        rgba(255,255,255,.035);
}


/*
 * Hide old generated mockup ONLY after
 * Live Build Story has successfully loaded.
 */

#bhavya-premium-custom-showcase
&.bh-c10e-live-build-active{
}


#bhavya-premium-custom-showcase
.bh-c10e-live-build-active{
}


#bhavya-premium-custom-showcase.bh-c10e-live-build-active
.bh-c9-browser,

#bhavya-premium-custom-showcase.bh-c10e-live-build-active
.bh-c9-phone,

#bhavya-premium-custom-showcase.bh-c10e-live-build-active
.bh-c9-admin-float,

#bhavya-premium-custom-showcase.bh-c10e-live-build-active
.bh-c9-float-card,

#bhavya-premium-custom-showcase.bh-c10e-live-build-active
.bh-c9-orbit{

    opacity:
        0 !important;

    pointer-events:
        none !important;
}


/* =========================================================
   BUILD STORY TOP BAR
   ========================================================= */

.bh-c10e-build-topbar{

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        0 14px;

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

    background:
        rgba(8,16,31,.84);
}


.bh-c10e-build-brand{

    display:flex;

    align-items:center;

    gap:
        7px;

    color:
        #dceafa;

    font-size:
        8px;

    font-weight:
        950;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.bh-c10e-build-brand::before{

    content:"";

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #60f8a0;

    box-shadow:
        0 0 13px
        rgba(96,248,160,.6);
}


.bh-c10e-build-status{

    padding:
        4px 8px;

    border:
        1px solid
        rgba(32,236,240,.16);

    border-radius:
        999px;

    background:
        rgba(32,236,240,.045);

    color:
        #20ecf0;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .08em;
}


/* =========================================================
   STORY WORKSPACE
   ========================================================= */

.bh-c10e-build-workspace{

    display:
        grid;

    grid-template-columns:
        .72fr 1.28fr;

    min-height:
        360px;
}


/* =========================================================
   CLIENT / BRIEF
   ========================================================= */

.bh-c10e-client-pane{

    position:
        relative;

    padding:
        20px 17px;

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

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.016),
            transparent
        );
}


.bh-c10e-person{

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.bh-c10e-avatar{

    width:
        37px;

    height:
        37px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(32,236,240,.20);

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            rgba(32,236,240,.13),
            rgba(115,62,253,.10)
        );

    color:
        #dffffc;

    font-size:
        13px;

    box-shadow:
        0 0 26px
        rgba(32,236,240,.06);
}


.bh-c10e-person-copy b{

    display:block;

    color:
        #eef7ff;

    font-size:
        9px;

    font-weight:
        900;
}


.bh-c10e-person-copy span{

    display:block;

    margin-top:
        2px;

    color:
        #6f8499;

    font-size:
        7px;
}


.bh-c10e-brief{

    margin-top:
        16px;

    padding:
        12px;

    border:
        1px solid
        rgba(39,185,253,.11);

    border-radius:
        13px;

    background:
        rgba(39,185,253,.035);
}


.bh-c10e-brief-label{

    color:
        #27b9fd;

    font-size:
        7px;

    font-weight:
        950;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


.bh-c10e-brief-title{

    display:block;

    margin-top:
        6px;

    color:
        #edf7ff;

    font-size:
        11px;

    line-height:
        1.35;

    font-weight:
        900;
}


.bh-c10e-brief-sub{

    display:block;

    margin-top:
        5px;

    color:
        #8196aa;

    font-size:
        7px;

    line-height:
        1.5;
}


/* =========================================================
   PROJECT FLOW
   ========================================================= */

.bh-c10e-flow{

    display:
        grid;

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

    gap:
        5px;

    margin-top:
        16px;
}


.bh-c10e-flow-step{

    position:
        relative;

    height:
        5px;

    overflow:hidden;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.07);
}


.bh-c10e-flow-step::after{

    content:"";

    position:absolute;

    inset:
        0;

    transform:
        scaleX(0);

    transform-origin:
        left;

    background:
        linear-gradient(
            90deg,
            #20ecf0,
            #733efd
        );

    transition:
        transform .45s ease;
}


.bh-c10e-flow-step.is-done::after,
.bh-c10e-flow-step.is-active::after{

    transform:
        scaleX(1);
}


/* =========================================================
   STUDIO
   ========================================================= */

.bh-c10e-studio{

    position:
        relative;

    padding:
        15px;
}


.bh-c10e-studio-header{

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:
        9px;
}


.bh-c10e-studio-name{

    color:
        #aebfd1;

    font-size:
        7px;

    font-weight:
        950;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.bh-c10e-studio-phase{

    color:
        #60f8a0;

    font-size:
        7px;

    font-weight:
        900;
}


.bh-c10e-studio-grid{

    display:
        grid;

    grid-template-columns:
        .92fr 1.08fr;

    gap:
        10px;

    margin-top:
        11px;
}


/* =========================================================
   CODE EDITOR
   ========================================================= */

.bh-c10e-editor{

    min-height:
        215px;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius:
        13px;

    background:
        rgba(4,10,20,.86);
}


.bh-c10e-editor-bar{

    height:
        30px;

    display:flex;

    align-items:center;

    gap:
        5px;

    padding:
        0 10px;

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


.bh-c10e-editor-dot{

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #334155;
}


.bh-c10e-editor-dot:nth-child(1){
    background:#fb7185;
}

.bh-c10e-editor-dot:nth-child(2){
    background:#f5c51e;
}

.bh-c10e-editor-dot:nth-child(3){
    background:#60f8a0;
}


.bh-c10e-code{

    padding:
        13px 12px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size:
        6.5px;

    line-height:
        1.85;

    color:
        #70869c;
}


.bh-c10e-code-line{

    opacity:
        .30;

    transform:
        translateX(-4px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        color .35s ease;
}


.bh-c10e-code-line.is-active{

    opacity:
        1;

    transform:
        translateX(0);

    color:
        #b9d3e9;
}


.bh-c10e-code-key{
    color:#b48aff;
}

.bh-c10e-code-value{
    color:#20ecf0;
}

.bh-c10e-code-success{
    color:#60f8a0;
}


/* =========================================================
   LIVE PREVIEW
   ========================================================= */

.bh-c10e-preview{

    position:
        relative;

    min-height:
        215px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(39,185,253,.10);

    border-radius:
        13px;

    background:
        linear-gradient(
            145deg,
            rgba(10,24,43,.96),
            rgba(8,16,33,.96)
        );
}


.bh-c10e-preview-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:
        cover;

    opacity:
        .24;

    filter:
        saturate(.9)
        brightness(.66);

    transition:
        opacity .5s ease;
}


.bh-c10e-preview-ui{

    position:relative;

    z-index:2;

    height:100%;

    min-height:
        215px;

    padding:
        14px;
}


.bh-c10e-preview-top{

    display:flex;

    align-items:center;

    justify-content:
        space-between;
}


.bh-c10e-preview-logo{

    color:
        #20ecf0;

    font-size:
        7px;

    font-weight:
        950;

    letter-spacing:
        .08em;
}


.bh-c10e-preview-live{

    padding:
        3px 6px;

    border-radius:
        999px;

    background:
        rgba(96,248,160,.08);

    color:
        #60f8a0;

    font-size:
        6px;

    font-weight:
        900;
}


.bh-c10e-preview-title{

    margin-top:
        23px;

    color:
        #edf7ff;

    font-size:
        14px;

    line-height:
        1.18;

    font-weight:
        950;
}


.bh-c10e-preview-sub{

    margin-top:
        6px;

    color:
        #8197ab;

    font-size:
        7px;

    line-height:
        1.5;
}


.bh-c10e-preview-cards{

    display:
        grid;

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

    gap:
        6px;

    margin-top:
        16px;
}


.bh-c10e-preview-card{

    min-height:
        44px;

    padding:
        7px;

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

    border-radius:
        8px;

    background:
        rgba(255,255,255,.025);
}


.bh-c10e-preview-card b{

    display:block;

    color:
        #c9d9e6;

    font-size:
        6px;
}


.bh-c10e-preview-card span{

    display:block;

    width:
        68%;

    height:
        3px;

    margin-top:
        6px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.11);
}


/* =========================================================
   STAGE RAIL
   ========================================================= */

.bh-c10e-stage-rail{

    position:absolute;

    left:
        15px;

    right:
        15px;

    bottom:
        12px;

    z-index:
        5;

    display:grid;

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

    gap:
        5px;
}


.bh-c10e-stage-chip{

    min-width:0;

    padding:
        7px 7px;

    overflow:hidden;

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

    border-radius:
        8px;

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

    color:
        #60788f;

    font-size:
        6px;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease;
}


.bh-c10e-stage-chip.is-active{

    border-color:
        rgba(32,236,240,.22);

    background:
        rgba(32,236,240,.065);

    color:
        #dffcff;
}


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

@media(max-width:900px){

    .hero.bh-c10e-hero{

        width:
            calc(100% - 20px);

        margin-top:
            82px;

        border-radius:
            27px;
    }


    .bh-c10e-build-workspace{

        grid-template-columns:
            1fr;
    }


    .bh-c10e-client-pane{

        padding:
            14px;

        border-right:
            0;

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


    .bh-c10e-brief{

        margin-top:
            10px;
    }


    .bh-c10e-studio{

        padding:
            13px;
    }

}


@media(max-width:680px){

    .hero.bh-c10e-hero{

        width:
            calc(100% - 12px);

        margin-top:
            72px;

        padding:
            39px 14px 36px;

        border-radius:
            22px;
    }


    .hero.bh-c10e-hero
    h1{

        font-size:
            clamp(
                37px,
                12vw,
                54px
            ) !important;

        line-height:
            1.01 !important;
    }


    .bh-c10e-title-business{

        font-size:
            .72em;
    }


    .bh-c10e-build-workspace{

        min-height:
            425px;
    }


    .bh-c10e-studio-grid{

        grid-template-columns:
            1fr;

        gap:
            8px;
    }


    .bh-c10e-editor{

        min-height:
            130px;
    }


    .bh-c10e-preview,
    .bh-c10e-preview-ui{

        min-height:
            145px;
    }


    .bh-c10e-stage-rail{

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


    .bh-c10e-live-build{

        inset:
            4px 0;
    }


    #bhavya-premium-custom-showcase
    .bh-c9-stage{

        min-height:
            610px;
    }

}


@media(max-width:420px){

    .bh-c10e-build-topbar{

        padding:
            0 10px;
    }


    .bh-c10e-stage-chip{

        font-size:
            5.5px;
    }

}


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

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

    .hero.bh-c10e-hero
    .hero-company-badge::after,

    .bh-c10e-title-platform{

        animation:
            none !important;
    }


    .bh-c10e-code-line,
    .bh-c10e-flow-step::after,
    .bh-c10e-stage-chip{

        transition:
            none !important;
    }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print{

    .hero.bh-c10e-hero{

        background:
            #fff !important;

        border-color:
            #dbe4ed !important;

        box-shadow:
            none !important;
    }


    .bh-c10e-live-build{

        background:
            #fff !important;

        border-color:
            #dbe4ed !important;

        box-shadow:
            none !important;
    }

}