/* =========================================================
   ZHOVA WEB DEVELOPMENT
   Uses existing ZHOVA visual system
   Bricolage Grotesque + Manrope
   1360px content width
========================================================= */

#zhova-web-development,
#zhova-web-development *,
#zhova-web-development *::before,
#zhova-web-development *::after{
    box-sizing:border-box;
}

#zhova-web-development{

    --wd-gold:var(--zs-gold,#D4AF37);
    --wd-gold-light:var(--zs-gold-light,#DCC77A);
    --wd-gold-soft:var(--zs-gold-soft,#BFA96A);

    --wd-white:var(--zs-white,#F7F6F2);
    --wd-muted:var(--zs-muted,#A8A6A0);
    --wd-dim:var(--zs-dim,#77756F);

    --wd-line:var(--zs-line,rgba(255,255,255,.11));
    --wd-line-soft:var(--zs-line-soft,rgba(255,255,255,.065));

    width:100%;
    overflow:hidden;

    color:var(--wd-white);

    background:#0A0A0A;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}


#zhova-web-development a{
    color:inherit;
    text-decoration:none;
}


#zhova-web-development h1,
#zhova-web-development h2,
#zhova-web-development h3{
    font-family:
        "Bricolage Grotesque",
        Arial,
        sans-serif;
}


#zhova-web-development p{
    font-family:
        "Manrope",
        Arial,
        sans-serif;
}


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

#zhova-web-development .zhwd-container{

    width:
        min(
            1360px,
            calc(100% - 48px)
        );

    margin-inline:auto;
}


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

#zhova-web-development .zhwd-hero{

    position:relative;

    padding:
        105px
        0
        55px;

    background:

        radial-gradient(
            circle at 78% 35%,
            rgba(212,175,55,.055),
            transparent 30%
        ),

        #0A0A0A;
}


#zhova-web-development .zhwd-hero-grid{

    min-height:560px;

    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(380px,.75fr);

    align-items:center;

    gap:80px;
}


#zhova-web-development .zhwd-hero-copy{
    position:relative;
    z-index:2;
}


#zhova-web-development .zhwd-eyebrow{

    display:flex;
    align-items:center;

    gap:17px;

    margin-bottom:25px;

    color:var(--wd-gold-light);

    font-size:10px;
    font-weight:700;

    letter-spacing:.24em;
}


#zhova-web-development .zhwd-eyebrow span{

    display:inline-flex;

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

    width:34px;
    height:34px;

    border:1px solid
        rgba(212,175,55,.32);

    border-radius:50%;

    font-size:9px;

    letter-spacing:.04em;
}


#zhova-web-development .zhwd-title{

    max-width:850px;

    margin:0;

    font-size:
        clamp(58px,7.2vw,108px);

    line-height:.88;

    letter-spacing:-.065em;

    font-weight:700;

    color:var(--wd-white);

    text-wrap:balance;
}


#zhova-web-development .zhwd-outline{

    color:transparent;

    -webkit-text-fill-color:transparent;

    -webkit-text-stroke:
        1.15px
        rgba(255,255,255,.72);

    text-stroke:
        1.15px
        rgba(255,255,255,.72);
}


#zhova-web-development .zhwd-hero-lead{

    max-width:650px;

    margin:
        32px
        0
        0;

    color:
        rgba(247,246,242,.68);

    font-size:
        clamp(16px,1.3vw,19px);

    line-height:1.75;

    letter-spacing:-.01em;
}


/* =========================================================
   BUTTONS
========================================================= */

#zhova-web-development .zhwd-actions{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:35px;
}


#zhova-web-development .zhwd-btn{

    min-height:48px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    padding:
        0 19px;

    border-radius:7px;

    font-size:11px;

    font-weight:800;

    letter-spacing:.01em;

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


#zhova-web-development .zhwd-btn-primary{

    color:#09090A;

    background:
        linear-gradient(
            135deg,
            var(--wd-gold-light),
            var(--wd-gold)
        );
}


#zhova-web-development .zhwd-btn-primary b{

    font-size:15px;

    font-weight:500;
}


#zhova-web-development .zhwd-btn-link{

    border:
        1px solid
        var(--wd-line);

    color:
        rgba(247,246,242,.75);
}


#zhova-web-development .zhwd-btn-link b{
    color:var(--wd-gold-light);
}


#zhova-web-development .zhwd-btn:hover{
    transform:translateY(-2px);
}


#zhova-web-development .zhwd-btn-link:hover{

    color:var(--wd-white);

    border-color:
        rgba(212,175,55,.42);

    background:
        rgba(212,175,55,.055);
}


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

#zhova-web-development .zhwd-hero-visual{

    position:relative;

    min-height:480px;

    display:flex;

    align-items:center;
    justify-content:center;
}


#zhova-web-development .zhwd-orbit{

    position:absolute;

    border:
        1px solid
        rgba(212,175,55,.16);

    border-radius:50%;

    animation:
        zhwdOrbit 14s linear infinite;
}


#zhova-web-development .zhwd-orbit-1{

    width:390px;
    height:390px;
}


#zhova-web-development .zhwd-orbit-2{

    width:285px;
    height:285px;

    border-color:
        rgba(255,255,255,.09);

    animation-duration:19s;

    animation-direction:reverse;
}


#zhova-web-development .zhwd-orbit-3{

    width:190px;
    height:190px;

    border-color:
        rgba(212,175,55,.22);

    animation-duration:11s;
}


#zhova-web-development .zhwd-core{

    position:relative;
    z-index:2;

    width:125px;
    height:125px;

    display:flex;

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

    border:
        1px solid
        rgba(212,175,55,.42);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.13),
            rgba(255,255,255,.015) 60%,
            transparent
        );

    box-shadow:
        0 0 70px
        rgba(212,175,55,.08);
}


#zhova-web-development .zhwd-core span{

    color:var(--wd-gold-light);

    font-family:
        "Bricolage Grotesque",
        monospace;

    font-size:27px;

    letter-spacing:-.08em;
}


#zhova-web-development .zhwd-code-card{

    position:absolute;

    right:0;
    bottom:35px;

    width:235px;

    padding:15px;

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

    background:
        rgba(15,15,15,.84);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.35);
}


#zhova-web-development .zhwd-code-top{

    display:flex;

    gap:5px;

    margin-bottom:14px;
}


#zhova-web-development .zhwd-code-top i{

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        rgba(229,199,102,.55);
}


#zhova-web-development .zhwd-code-lines{

    display:flex;

    flex-direction:column;

    gap:8px;
}


#zhova-web-development .zhwd-code-lines span{

    display:block;

    height:4px;

    border-radius:10px;

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


#zhova-web-development .zhwd-code-lines span:nth-child(1){
    width:72%;
}

#zhova-web-development .zhwd-code-lines span:nth-child(2){
    width:48%;
}

#zhova-web-development .zhwd-code-lines span:nth-child(3){
    width:84%;
}

#zhova-web-development .zhwd-code-lines span:nth-child(4){
    width:61%;
}

#zhova-web-development .zhwd-code-lines span:nth-child(5){
    width:77%;
}

#zhova-web-development .zhwd-code-lines span:nth-child(6){
    width:43%;
}


/* =========================================================
   TRUST STRIP
========================================================= */

#zhova-web-development .zhwd-trust-strip{

    display:grid;

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

    border-top:
        1px solid
        var(--wd-line-soft);

    border-bottom:
        1px solid
        var(--wd-line-soft);
}


#zhova-web-development .zhwd-trust-strip span{

    padding:17px 10px;

    text-align:center;

    color:
        rgba(247,246,242,.40);

    font-size:9px;

    font-weight:700;

    letter-spacing:.19em;
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

#zhova-web-development .zhwd-section{

    padding:
        82px
        0;

    border-top:
        1px solid
        var(--wd-line-soft);
}


#zhova-web-development .zhwd-section-head{

    display:grid;

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

    gap:28px;

    margin-bottom:48px;
}


#zhova-web-development .zhwd-section-index{

    position:relative;

    padding-top:5px;

    color:
        var(--wd-gold-light);

    font-size:10px;

    font-weight:700;

    letter-spacing:.15em;
}


#zhova-web-development .zhwd-section-index::after{

    content:"";

    position:absolute;

    left:0;
    top:31px;

    width:31px;
    height:1px;

    background:
        var(--wd-gold);
}


#zhova-web-development .zhwd-label{

    margin-bottom:17px;

    color:
        var(--wd-gold-light);

    font-size:9px;

    font-weight:700;

    letter-spacing:.23em;
}


#zhova-web-development .zhwd-section h2{

    max-width:850px;

    margin:0;

    font-size:
        clamp(42px,5vw,70px);

    line-height:.95;

    letter-spacing:-.055em;

    font-weight:700;

    color:var(--wd-white);

    text-wrap:balance;
}


/* =========================================================
   ANSWER
========================================================= */

#zhova-web-development .zhwd-answer-grid{

    display:grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(280px,.8fr);

    gap:80px;
}


#zhova-web-development .zhwd-large-copy{

    max-width:850px;

    margin:0;

    font-family:
        "Bricolage Grotesque",
        Arial,
        sans-serif;

    color:
        var(--wd-white);

    font-size:
        clamp(25px,2.5vw,37px);

    line-height:1.25;

    letter-spacing:-.035em;
}


#zhova-web-development .zhwd-answer-side{

    display:flex;

    flex-direction:column;

    gap:22px;
}


#zhova-web-development .zhwd-answer-side p{

    margin:0;

    color:var(--wd-muted);

    font-size:14px;

    line-height:1.85;
}


/* =========================================================
   SERVICES
========================================================= */

#zhova-web-development .zhwd-service-grid{

    display:grid;

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

    gap:1px;

    background:
        var(--wd-line);

    border:
        1px solid
        var(--wd-line);
}


#zhova-web-development .zhwd-service-card{

    position:relative;

    min-height:245px;

    padding:
        25px
        28px;

    display:flex;

    flex-direction:column;

    background:#111;

    overflow:hidden;

    transition:
        background .4s ease,
        transform .4s ease;
}


#zhova-web-development .zhwd-service-card::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    right:-140px;
    top:-140px;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.10),
            transparent 70%
        );

    opacity:0;

    transition:
        opacity .5s ease,
        transform .6s ease;
}


#zhova-web-development .zhwd-service-card:hover{

    background:#151515;

    transform:
        translateY(-2px);
}


#zhova-web-development .zhwd-service-card:hover::before{

    opacity:1;

    transform:scale(1.2);
}


#zhova-web-development .zhwd-card-number{

    color:
        rgba(229,199,102,.62);

    font-size:10px;

    font-weight:700;

    letter-spacing:.1em;
}


#zhova-web-development .zhwd-card-content{

    margin-top:auto;
}


#zhova-web-development .zhwd-card-content h3{

    margin:
        0
        0
        11px;

    color:
        var(--wd-white);

    font-size:24px;

    line-height:1.1;

    letter-spacing:-.035em;
}


#zhova-web-development .zhwd-card-content p{

    max-width:520px;

    margin:0;

    color:var(--wd-muted);

    font-size:12px;

    line-height:1.75;
}


#zhova-web-development .zhwd-card-arrow{

    position:absolute;

    right:24px;
    top:22px;

    width:32px;
    height:32px;

    display:flex;

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

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

    border-radius:50%;

    color:
        rgba(255,255,255,.48);

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


#zhova-web-development .zhwd-service-card:hover
.zhwd-card-arrow{

    color:var(--wd-gold-light);

    border-color:
        rgba(212,175,55,.40);

    transform:
        translateX(3px);
}


/* =========================================================
   PRINCIPLES
========================================================= */

#zhova-web-development .zhwd-principle-intro{

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(280px,.55fr);

    gap:80px;

    margin-bottom:42px;
}


#zhova-web-development .zhwd-principle-intro > p{

    max-width:470px;

    align-self:end;

    margin:0;

    color:var(--wd-muted);

    font-size:14px;

    line-height:1.8;
}


#zhova-web-development .zhwd-principle-list{

    border-top:
        1px solid
        var(--wd-line);
}


#zhova-web-development .zhwd-principle{

    display:grid;

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

    gap:28px;

    padding:
        28px 0;

    border-bottom:
        1px solid
        var(--wd-line);
}


#zhova-web-development .zhwd-principle > span{

    color:
        var(--wd-gold-light);

    font-size:10px;

    font-weight:700;
}


#zhova-web-development .zhwd-principle h3{

    margin:
        0 0 7px;

    color:var(--wd-white);

    font-size:22px;

    letter-spacing:-.03em;
}


#zhova-web-development .zhwd-principle p{

    max-width:760px;

    margin:0;

    color:var(--wd-muted);

    font-size:12px;

    line-height:1.75;
}


/* =========================================================
   PROCESS
========================================================= */

#zhova-web-development .zhwd-process-track{

    position:relative;

    display:grid;

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

    gap:1px;

    background:
        var(--wd-line);
}


#zhova-web-development .zhwd-process-step{

    position:relative;

    min-height:260px;

    padding:25px;

    background:#101010;
}


#zhova-web-development .zhwd-process-node{

    width:39px;
    height:39px;

    display:flex;

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

    margin-bottom:45px;

    border:
        1px solid
        rgba(212,175,55,.36);

    border-radius:50%;

    color:
        var(--wd-gold-light);

    font-size:9px;

    font-weight:700;
}


#zhova-web-development .zhwd-process-step h3{

    margin:
        0 0 9px;

    font-size:21px;

    letter-spacing:-.035em;
}


#zhova-web-development .zhwd-process-step p{

    margin:0;

    color:var(--wd-muted);

    font-size:11px;

    line-height:1.75;
}


/* =========================================================
   STACK
========================================================= */

#zhova-web-development .zhwd-stack-grid{

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.65fr);

    gap:90px;

    margin-bottom:48px;
}


#zhova-web-development .zhwd-stack-copy{

    display:flex;

    flex-direction:column;

    gap:20px;
}


#zhova-web-development .zhwd-stack-copy p{

    margin:0;

    color:var(--wd-muted);

    font-size:13px;

    line-height:1.8;
}


#zhova-web-development .zhwd-tech-grid{

    display:grid;

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

    gap:1px;

    background:var(--wd-line);

    border:
        1px solid
        var(--wd-line);
}


#zhova-web-development .zhwd-tech-item{

    min-height:150px;

    padding:23px;

    background:#101010;
}


#zhova-web-development .zhwd-tech-item span{

    display:block;

    margin-bottom:23px;

    color:
        var(--wd-gold-light);

    font-size:9px;

    font-weight:700;
}


#zhova-web-development .zhwd-tech-item strong{

    display:block;

    margin-bottom:8px;

    color:var(--wd-white);

    font-family:
        "Bricolage Grotesque",
        Arial,
        sans-serif;

    font-size:18px;

    letter-spacing:-.025em;
}


#zhova-web-development .zhwd-tech-item small{

    display:block;

    color:var(--wd-dim);

    font-size:10px;

    line-height:1.55;
}


/* =========================================================
   FIT
========================================================= */

#zhova-web-development .zhwd-fit{

    background:#0C0C0C;
}


#zhova-web-development .zhwd-fit-head{

    max-width:950px;

    margin-bottom:45px;
}


#zhova-web-development .zhwd-fit-list{

    border-top:
        1px solid
        var(--wd-line);
}


#zhova-web-development .zhwd-fit-row{

    display:grid;

    grid-template-columns:
        65px minmax(0,1fr) 45px;

    gap:28px;

    align-items:center;

    padding:
        25px 0;

    border-bottom:
        1px solid
        var(--wd-line);

    transition:
        padding .35s ease,
        background .35s ease;
}


#zhova-web-development .zhwd-fit-row:hover{

    padding-left:14px;

    padding-right:14px;

    background:
        rgba(212,175,55,.035);
}


#zhova-web-development .zhwd-fit-row > span{

    color:
        var(--wd-gold-light);

    font-size:9px;

    font-weight:700;
}


#zhova-web-development .zhwd-fit-row strong{

    display:block;

    margin-bottom:6px;

    color:var(--wd-white);

    font-family:
        "Bricolage Grotesque",
        Arial,
        sans-serif;

    font-size:24px;

    letter-spacing:-.035em;
}


#zhova-web-development .zhwd-fit-row small{

    display:block;

    color:var(--wd-muted);

    font-size:11px;

    line-height:1.6;
}


#zhova-web-development .zhwd-fit-row b{

    width:34px;
    height:34px;

    display:flex;

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

    border:
        1px solid
        var(--wd-line);

    border-radius:50%;

    color:
        var(--wd-gold-light);

    font-weight:400;
}


/* =========================================================
   RELATED
========================================================= */

#zhova-web-development .zhwd-related-grid{

    display:grid;

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

    gap:1px;

    background:var(--wd-line);

    border:
        1px solid
        var(--wd-line);
}


#zhova-web-development .zhwd-related-card{

    position:relative;

    min-height:205px;

    padding:24px;

    background:#101010;

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


#zhova-web-development .zhwd-related-card:hover{

    background:#151515;

    transform:
        translateY(-2px);
}


#zhova-web-development .zhwd-related-card > span{

    display:block;

    margin-bottom:30px;

    color:
        var(--wd-gold-light);

    font-size:9px;

    font-weight:700;
}


#zhova-web-development .zhwd-related-card strong{

    display:block;

    margin-bottom:9px;

    color:var(--wd-white);

    font-family:
        "Bricolage Grotesque",
        Arial,
        sans-serif;

    font-size:21px;

    letter-spacing:-.03em;
}


#zhova-web-development .zhwd-related-card p{

    max-width:290px;

    margin:0;

    color:var(--wd-muted);

    font-size:11px;

    line-height:1.65;
}


#zhova-web-development .zhwd-related-card b{

    position:absolute;

    right:20px;
    bottom:20px;

    color:
        rgba(229,199,102,.55);

    font-weight:400;
}


/* =========================================================
   FAQ
========================================================= */

#zhova-web-development .zhwd-faq-list{

    border-top:
        1px solid
        var(--wd-line);
}


#zhova-web-development .zhwd-faq-list details{

    border-bottom:
        1px solid
        var(--wd-line);
}


#zhova-web-development .zhwd-faq-list summary{

    position:relative;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:30px;

    padding:
        22px 0;

    cursor:pointer;

    list-style:none;

    color:
        var(--wd-white);

    font-family:
        "Bricolage Grotesque",
        Arial,
        sans-serif;

    font-size:20px;

    font-weight:600;

    letter-spacing:-.025em;
}


#zhova-web-development .zhwd-faq-list summary::-webkit-details-marker{
    display:none;
}


#zhova-web-development .zhwd-faq-list summary span{

    flex-shrink:0;

    width:31px;
    height:31px;

    display:flex;

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

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

    border-radius:50%;

    color:
        var(--wd-gold-light);

    font-family:Arial,sans-serif;

    font-size:16px;

    font-weight:300;

    transition:
        transform .3s ease;
}


#zhova-web-development .zhwd-faq-list details[open]
summary span{

    transform:rotate(45deg);
}


#zhova-web-development .zhwd-faq-list p{

    max-width:900px;

    margin:
        0
        0
        25px;

    color:var(--wd-muted);

    font-size:13px;

    line-height:1.85;
}


/* =========================================================
   CTA
========================================================= */

#zhova-web-development .zhwd-cta{

    padding:
        85px
        0
        105px;
}


#zhova-web-development .zhwd-cta-box{

    position:relative;

    display:grid;

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

    align-items:end;

    gap:60px;

    padding:
        55px 60px;

    overflow:hidden;

    border:
        1px solid
        rgba(212,175,55,.19);

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(212,175,55,.09),
            transparent 38%
        ),

        #101010;
}


#zhova-web-development .zhwd-cta-box::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:120px;
    height:1px;

    background:
        var(--wd-gold);
}


#zhova-web-development .zhwd-cta-box h2{

    max-width:800px;

    margin:0;

    font-size:
        clamp(42px,5vw,72px);

    line-height:.95;

    letter-spacing:-.055em;
}


#zhova-web-development .zhwd-cta-box p{

    max-width:620px;

    margin:
        23px
        0
        0;

    color:var(--wd-muted);

    font-size:13px;

    line-height:1.8;
}


#zhova-web-development .zhwd-cta-actions{

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:10px;

    min-width:180px;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes zhwdOrbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


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

@media (max-width:1000px){

    #zhova-web-development .zhwd-container{

        width:
            min(
                1360px,
                calc(100% - 40px)
            );
    }


    #zhova-web-development .zhwd-hero-grid{

        grid-template-columns:
            minmax(0,1fr)
            minmax(280px,.7fr);

        gap:45px;
    }


    #zhova-web-development .zhwd-title{

        font-size:
            clamp(52px,7vw,82px);
    }


    #zhova-web-development .zhwd-service-grid{

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


    #zhova-web-development .zhwd-process-track{

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


    #zhova-web-development .zhwd-tech-grid{

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


    #zhova-web-development .zhwd-related-grid{

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

}


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

@media (max-width:700px){

    #zhova-web-development .zhwd-container{

        width:
            calc(100% - 32px);
    }


    #zhova-web-development .zhwd-hero{

        padding:
            75px 0
            35px;
    }


    #zhova-web-development .zhwd-hero-grid{

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:35px;
    }


    #zhova-web-development .zhwd-title{

        font-size:
            clamp(48px,14vw,72px);

        line-height:.9;
    }


    #zhova-web-development .zhwd-hero-lead{

        margin-top:25px;

        font-size:15px;
    }


    #zhova-web-development .zhwd-actions{

        flex-direction:column;

        align-items:stretch;

        gap:9px;
    }


    #zhova-web-development .zhwd-btn{

        width:100%;
    }


    #zhova-web-development .zhwd-hero-visual{

        min-height:320px;
    }


    #zhova-web-development .zhwd-orbit-1{
        width:280px;
        height:280px;
    }


    #zhova-web-development .zhwd-orbit-2{
        width:210px;
        height:210px;
    }


    #zhova-web-development .zhwd-orbit-3{
        width:140px;
        height:140px;
    }


    #zhova-web-development .zhwd-code-card{

        right:0;

        width:190px;

        bottom:10px;
    }


    #zhova-web-development .zhwd-trust-strip{

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


    #zhova-web-development .zhwd-trust-strip span{

        border-bottom:
            1px solid
            var(--wd-line-soft);
    }


    #zhova-web-development .zhwd-section{

        padding:
            58px 0;
    }


    #zhova-web-development .zhwd-section-head{

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

        gap:15px;

        margin-bottom:32px;
    }


    #zhova-web-development .zhwd-section h2{

        font-size:
            clamp(38px,11vw,55px);
    }


    #zhova-web-development .zhwd-answer-grid,
    #zhova-web-development .zhwd-principle-intro,
    #zhova-web-development .zhwd-stack-grid{

        grid-template-columns:1fr;

        gap:28px;
    }


    #zhova-web-development .zhwd-large-copy{

        font-size:
            clamp(23px,7vw,31px);
    }


    #zhova-web-development .zhwd-service-grid,
    #zhova-web-development .zhwd-related-grid,
    #zhova-web-development .zhwd-tech-grid{

        grid-template-columns:1fr;
    }


    #zhova-web-development .zhwd-service-card{

        min-height:215px;
    }


    #zhova-web-development .zhwd-process-track{

        grid-template-columns:1fr;
    }


    #zhova-web-development .zhwd-process-step{

        min-height:auto;

        padding:25px;
    }


    #zhova-web-development .zhwd-process-node{

        margin-bottom:25px;
    }


    #zhova-web-development .zhwd-fit-row{

        grid-template-columns:
            35px minmax(0,1fr) 34px;

        gap:12px;
    }


    #zhova-web-development .zhwd-fit-row strong{

        font-size:20px;
    }


    #zhova-web-development .zhwd-cta{

        padding:
            55px 0
            70px;
    }


    #zhova-web-development .zhwd-cta-box{

        grid-template-columns:1fr;

        gap:30px;

        padding:
            38px 25px;
    }


    #zhova-web-development .zhwd-cta-actions{

        width:100%;
    }


    #zhova-web-development .zhwd-faq-list summary{

        font-size:17px;
    }

}


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

@media (max-width:430px){

    #zhova-web-development .zhwd-container{

        width:
            calc(100% - 28px);
    }


    #zhova-web-development .zhwd-title{

        font-size:
            47px;
    }


    #zhova-web-development .zhwd-section h2{

        font-size:
            37px;
    }


    #zhova-web-development .zhwd-trust-strip span{

        font-size:8px;

        letter-spacing:.12em;
    }


    #zhova-web-development .zhwd-card-content h3{

        font-size:21px;
    }


    #zhova-web-development .zhwd-principle{

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

        gap:14px;
    }

}


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

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

    #zhova-web-development *,
    #zhova-web-development *::before,
    #zhova-web-development *::after{

        animation:none !important;

        transition:none !important;
    }

}


/* =========================================================
   ZHOVA WEB DEVELOPMENT — ENHANCED MOTION / INTERACTION
   Keeps existing content + layout intact.
   Outline text uses Arial only.
========================================================= */

/* OUTLINE / HOLLOW TYPE — ARIAL ONLY */
#zhova-web-development .zhwd-outline{
    font-family:Arial,sans-serif !important;
    font-weight:700;
    letter-spacing:-.045em;
}

/* Motion is progressively enhanced by JS.
   Without JS the original page remains fully visible. */
#zhova-web-development.zhwd-motion-ready
.zhwd-motion-item{
    opacity:0;
    transform:translate3d(0,24px,0);
    filter:blur(5px);
    transition:
        opacity .85s cubic-bezier(.22,.8,.22,1),
        transform .85s cubic-bezier(.22,.8,.22,1),
        filter .85s cubic-bezier(.22,.8,.22,1);
}

#zhova-web-development.zhwd-motion-ready
.zhwd-motion-item.zhwd-motion-visible{
    opacity:1;
    transform:none;
    filter:none;
}

/* Staggered cards / rows */
#zhova-web-development.zhwd-motion-ready
.zhwd-motion-stagger > *{
    --zhwd-delay:0ms;
    transition-delay:var(--zhwd-delay);
}

/* Headings arrive with slightly more character */
#zhova-web-development.zhwd-motion-ready
.zhwd-section-head,
#zhova-web-development.zhwd-motion-ready
.zhwd-fit-head{
    opacity:0;
    transform:translate3d(0,20px,0);
    filter:blur(4px);
    transition:
        opacity .9s cubic-bezier(.22,.8,.22,1),
        transform .9s cubic-bezier(.22,.8,.22,1),
        filter .9s cubic-bezier(.22,.8,.22,1);
}
#zhova-web-development.zhwd-motion-ready
.zhwd-section-head.zhwd-motion-visible,
#zhova-web-development.zhwd-motion-ready
.zhwd-fit-head.zhwd-motion-visible{
    opacity:1;
    transform:none;
    filter:none;
}

/* SERVICE CARDS */
#zhova-web-development .zhwd-service-card,
#zhova-web-development .zhwd-related-card,
#zhova-web-development .zhwd-tech-item,
#zhova-web-development .zhwd-process-step{
    --mouse-x:50%;
    --mouse-y:50%;
    --tilt-x:0deg;
    --tilt-y:0deg;
    position:relative;
    isolation:isolate;
    transform-style:preserve-3d;
    will-change:transform;
}

#zhova-web-development .zhwd-service-card::after,
#zhova-web-development .zhwd-related-card::after,
#zhova-web-development .zhwd-tech-item::after,
#zhova-web-development .zhwd-process-step::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    border:1px solid transparent;
    background:
        radial-gradient(
            260px circle at var(--mouse-x) var(--mouse-y),
            rgba(220,199,122,.16),
            transparent 58%
        );
    opacity:0;
    transition:opacity .45s ease;
}

#zhova-web-development .zhwd-service-card:hover::after,
#zhova-web-development .zhwd-related-card:hover::after,
#zhova-web-development .zhwd-tech-item:hover::after,
#zhova-web-development .zhwd-process-step:hover::after{
    opacity:1;
}

/* Keep content above visual layers */
#zhova-web-development .zhwd-service-card > *,
#zhova-web-development .zhwd-related-card > *,
#zhova-web-development .zhwd-tech-item > *,
#zhova-web-development .zhwd-process-step > *{
    position:relative;
    z-index:1;
}

/* Stronger but still restrained service-card hover */
#zhova-web-development .zhwd-service-card{
    transition:
        background .45s ease,
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}
#zhova-web-development .zhwd-service-card:hover{
    transform:
        perspective(900px)
        rotateX(var(--tilt-y))
        rotateY(var(--tilt-x))
        translate3d(0,-5px,0);
    box-shadow:
        0 22px 60px rgba(0,0,0,.28),
        0 0 0 1px rgba(212,175,55,.08);
}
#zhova-web-development .zhwd-service-card .zhwd-card-number{
    transition:transform .45s ease,color .35s ease;
}
#zhova-web-development .zhwd-service-card:hover .zhwd-card-number{
    transform:translateX(4px);
    color:var(--wd-gold-light);
}
#zhova-web-development .zhwd-service-card .zhwd-card-content h3{
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
#zhova-web-development .zhwd-service-card:hover .zhwd-card-content h3{
    transform:translateX(4px);
}

/* Related cards */
#zhova-web-development .zhwd-related-card{
    transition:
        background .4s ease,
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease;
}
#zhova-web-development .zhwd-related-card:hover{
    transform:
        perspective(900px)
        rotateX(var(--tilt-y))
        rotateY(var(--tilt-x))
        translate3d(0,-5px,0);
    box-shadow:
        0 18px 50px rgba(0,0,0,.22);
}
#zhova-web-development .zhwd-related-card strong,
#zhova-web-development .zhwd-related-card b{
    transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
#zhova-web-development .zhwd-related-card:hover strong{
    transform:translateX(4px);
}
#zhova-web-development .zhwd-related-card:hover b{
    transform:translate3d(3px,-3px,0);
}

/* Technology cards */
#zhova-web-development .zhwd-tech-item{
    overflow:hidden;
    transition:
        background .4s ease,
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease;
}
#zhova-web-development .zhwd-tech-item:hover{
    background:#131313;
    transform:
        perspective(900px)
        rotateX(var(--tilt-y))
        rotateY(var(--tilt-x))
        translate3d(0,-4px,0);
    box-shadow:0 16px 45px rgba(0,0,0,.22);
}
#zhova-web-development .zhwd-tech-item span{
    transition:transform .4s ease,color .35s ease;
}
#zhova-web-development .zhwd-tech-item:hover span{
    transform:translateX(4px);
    color:var(--wd-gold-light);
}

/* PROCESS — connected timeline feel */
#zhova-web-development .zhwd-process-step{
    overflow:hidden;
    transition:
        background .4s ease,
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease;
}
#zhova-web-development .zhwd-process-step:hover{
    background:#131313;
    transform:
        perspective(900px)
        rotateX(var(--tilt-y))
        rotateY(var(--tilt-x))
        translate3d(0,-4px,0);
    box-shadow:0 16px 40px rgba(0,0,0,.20);
}
#zhova-web-development .zhwd-process-step::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--wd-gold-light),
        transparent
    );
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
#zhova-web-development .zhwd-process-step:hover::before{
    transform:scaleX(1);
}
#zhova-web-development .zhwd-process-node{
    position:relative;
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        background .35s ease,
        box-shadow .45s ease;
}
#zhova-web-development .zhwd-process-node::after{
    content:"";
    position:absolute;
    inset:-7px;
    border:1px solid rgba(212,175,55,.18);
    border-radius:50%;
    opacity:0;
    transform:scale(.7);
    transition:opacity .45s ease,transform .45s ease;
}
#zhova-web-development .zhwd-process-step:hover .zhwd-process-node{
    transform:translateY(-3px) scale(1.04);
    background:rgba(212,175,55,.045);
    box-shadow:0 0 30px rgba(212,175,55,.08);
}
#zhova-web-development .zhwd-process-step:hover .zhwd-process-node::after{
    opacity:1;
    transform:scale(1);
}

/* WHO WE WORK WITH — premium row interaction */
#zhova-web-development .zhwd-fit-row{
    position:relative;
    overflow:hidden;
    transition:
        padding .42s cubic-bezier(.2,.8,.2,1),
        background .42s ease,
        color .3s ease;
}
#zhova-web-development .zhwd-fit-row::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--wd-gold-light) 45%,
        transparent
    );
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
#zhova-web-development .zhwd-fit-row:hover::before{
    transform:scaleX(1);
}
#zhova-web-development .zhwd-fit-row > span{
    transition:transform .4s ease,color .35s ease;
}
#zhova-web-development .zhwd-fit-row:hover > span{
    transform:translateX(4px);
}
#zhova-web-development .zhwd-fit-row b{
    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}
#zhova-web-development .zhwd-fit-row:hover b{
    transform:translate3d(3px,-2px,0);
    border-color:rgba(212,175,55,.38);
    background:rgba(212,175,55,.045);
    box-shadow:0 0 25px rgba(212,175,55,.08);
}

/* FAQ */
#zhova-web-development .zhwd-faq-list details{
    transition:background .35s ease;
}
#zhova-web-development .zhwd-faq-list details:hover{
    background:rgba(255,255,255,.018);
}
#zhova-web-development .zhwd-faq-list summary{
    transition:padding .35s ease,color .35s ease;
}
#zhova-web-development .zhwd-faq-list details:hover summary{
    padding-left:10px;
    color:#fff;
}
#zhova-web-development .zhwd-faq-list summary span{
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}
#zhova-web-development .zhwd-faq-list details:hover summary span{
    border-color:rgba(212,175,55,.38);
    background:rgba(212,175,55,.035);
    box-shadow:0 0 24px rgba(212,175,55,.08);
}
#zhova-web-development .zhwd-faq-list details[open] summary span{
    transform:rotate(45deg);
}
#zhova-web-development .zhwd-faq-list details[open] p{
    animation:zhwdFaqIn .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes zhwdFaqIn{
    from{
        opacity:0;
        transform:translateY(-6px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* CTA */
#zhova-web-development .zhwd-cta-box{
    transition:
        border-color .45s ease,
        box-shadow .45s ease,
        transform .45s cubic-bezier(.2,.8,.2,1);
}
#zhova-web-development .zhwd-cta-box::after{
    content:"";
    position:absolute;
    inset:-30%;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(220,199,122,.10),
            transparent 30%
        );
    transform:translate3d(-6%,0,0);
    transition:transform 1.1s cubic-bezier(.2,.8,.2,1);
}
#zhova-web-development .zhwd-cta-box:hover{
    border-color:rgba(212,175,55,.30);
    box-shadow:0 25px 80px rgba(0,0,0,.25);
    transform:translateY(-3px);
}
#zhova-web-development .zhwd-cta-box:hover::after{
    transform:translate3d(5%,0,0);
}

/* HERO text / visual entrance */
#zhova-web-development.zhwd-motion-ready .zhwd-hero-copy,
#zhova-web-development.zhwd-motion-ready .zhwd-hero-visual,
#zhova-web-development.zhwd-motion-ready .zhwd-trust-strip{
    opacity:0;
    transform:translate3d(0,22px,0);
    filter:blur(4px);
    transition:
        opacity 1s cubic-bezier(.2,.8,.2,1),
        transform 1s cubic-bezier(.2,.8,.2,1),
        filter 1s cubic-bezier(.2,.8,.2,1);
}
#zhova-web-development .zhwd-hero-copy.zhwd-hero-visible,
#zhova-web-development .zhwd-hero-visual.zhwd-hero-visible,
#zhova-web-development .zhwd-trust-strip.zhwd-hero-visible{
    opacity:1;
    transform:none;
    filter:none;
}
#zhova-web-development .zhwd-hero-visual.zhwd-hero-visible{
    transition-delay:.12s;
}
#zhova-web-development .zhwd-trust-strip.zhwd-hero-visible{
    transition-delay:.20s;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion:reduce){
    #zhova-web-development.zhwd-motion-ready
    .zhwd-motion-item,
    #zhova-web-development.zhwd-motion-ready
    .zhwd-section-head,
    #zhova-web-development.zhwd-motion-ready
    .zhwd-fit-head,
    #zhova-web-development.zhwd-motion-ready .zhwd-hero-copy,
    #zhova-web-development.zhwd-motion-ready .zhwd-hero-visual,
    #zhova-web-development.zhwd-motion-ready .zhwd-trust-strip{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        transition:none !important;
    }
}