/* ============================================================
   POLISANAROWER.PL — 404
   Recovery page / Divi 5 child theme
============================================================ */

#pnr-404,
#pnr-404 *{
    box-sizing:border-box;
}

#pnr-404{
    --navy:#071B35;
    --navy2:#0D2949;
    --blue:#0068B4;
    --cyan:#00A6DF;
    --amber:#FFB400;

    --paper:#F6F7F4;
    --paper2:#EAF1F3;
    --white:#FFFFFF;

    --text:#13263A;
    --muted:#627587;
    --line:rgba(7,27,53,.10);

    width:100vw;
    max-width:none;

    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);

    overflow:hidden;

    background:var(--paper);
    color:var(--text);

    font-family:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}

#pnr-404 a{
    text-decoration:none;
}

#pnr-404 h1,
#pnr-404 h2,
#pnr-404 p{
    overflow-wrap:normal;
    word-break:normal;
}

#pnr-404 .pnr-404-shell{
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
}


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

#pnr-404 .pnr-404-hero{
    position:relative;

    padding:84px 0 76px;

    background:
        radial-gradient(
            circle at 84% 16%,
            rgba(0,166,223,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(255,180,0,.08),
            transparent 23%
        ),
        var(--paper);
}

#pnr-404 .pnr-404-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.02fr)
        minmax(420px,.98fr);

    gap:78px;
    align-items:center;
}


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

#pnr-404 .pnr-404-copy{
    min-width:0;
}

#pnr-404 .pnr-404-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:var(--blue);

    font-size:10px;
    line-height:1.2;
    font-weight:900;

    letter-spacing:.14em;
    text-transform:uppercase;
}

#pnr-404 .pnr-404-tag::before{
    content:"";

    width:28px;
    height:4px;
    flex:0 0 28px;

    border-radius:99px;

    background:var(--amber);
}

#pnr-404 h1{
    max-width:690px;

    margin:22px 0 0;

    color:var(--navy);

    font-family:
        "Space Grotesk",
        "Manrope",
        sans-serif;

    font-size:clamp(58px,6.7vw,92px);
    line-height:.93;
    font-weight:700;

    letter-spacing:-.065em;
}

#pnr-404 h1 span{
    display:block;
    color:var(--blue);
}

#pnr-404 .pnr-404-lead{
    max-width:640px;

    margin:29px 0 0;

    color:#42576B;

    font-size:19px;
    line-height:1.62;

    letter-spacing:-.012em;
}

#pnr-404 .pnr-404-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:34px;
}

#pnr-404 .pnr-404-btn{
    min-height:56px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:0 26px;

    border-radius:999px;

    font-size:13px;
    line-height:1;
    font-weight:800;

    transition:
        transform .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

#pnr-404 .pnr-404-btn:hover{
    transform:translateY(-2px);
}

#pnr-404 .pnr-404-btn-primary{
    background:var(--blue);
    color:#fff!important;

    box-shadow:
        0 17px 38px
        rgba(0,104,180,.20);
}

#pnr-404 .pnr-404-btn-primary:hover{
    background:#075797;
    color:#fff!important;
}

#pnr-404 .pnr-404-btn-primary span{
    transition:transform .2s ease;
}

#pnr-404 .pnr-404-btn-primary:hover span{
    transform:translateX(3px);
}

#pnr-404 .pnr-404-btn-secondary{
    border:1px solid var(--line);

    background:#fff;
    color:var(--navy)!important;
}

#pnr-404 .pnr-404-btn-secondary:hover{
    border-color:rgba(7,27,53,.18);
    color:var(--navy)!important;
}

#pnr-404 .pnr-404-hint{
    max-width:610px;

    margin:19px 0 0;

    color:var(--muted);

    font-size:11px;
    line-height:1.65;
}


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

#pnr-404 .pnr-404-visual{
    position:relative;

    min-height:520px;

    overflow:hidden;

    border-radius:42px;

    background:
        radial-gradient(
            circle at 80% 16%,
            rgba(0,166,223,.19),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #0C2C4F,
            #071B35 58%,
            #041222
        );

    box-shadow:
        0 34px 85px
        rgba(0,0,0,.21);

    isolation:isolate;
}

#pnr-404 .pnr-404-visual::before,
#pnr-404 .pnr-404-visual::after{
    content:"";

    position:absolute;

    border:1px solid rgba(255,255,255,.075);
    border-radius:50%;

    pointer-events:none;
}

#pnr-404 .pnr-404-visual::before{
    width:430px;
    height:430px;

    top:-165px;
    right:-145px;
}

#pnr-404 .pnr-404-visual::after{
    width:270px;
    height:270px;

    left:-100px;
    bottom:-100px;
}

#pnr-404 .pnr-404-visual-label{
    position:absolute;
    z-index:5;

    top:28px;
    left:30px;

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

    font-size:9px;
    line-height:1;
    font-weight:900;

    letter-spacing:.16em;
}

#pnr-404 .pnr-404-number{
    position:absolute;

    top:48%;
    left:50%;

    z-index:1;

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

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

    font-family:
        "Space Grotesk",
        "Manrope",
        sans-serif;

    font-size:clamp(170px,18vw,260px);
    line-height:.75;
    font-weight:700;

    letter-spacing:-.09em;

    user-select:none;
}

#pnr-404 .pnr-404-route{
    position:absolute;
    inset:28px 18px 58px;

    z-index:3;

    width:calc(100% - 36px);
    height:calc(100% - 86px);
}

#pnr-404 .pnr-404-route-base{
    fill:none;

    stroke:rgba(255,255,255,.13);
    stroke-width:3;

    stroke-dasharray:5 12;
    stroke-linecap:round;
}

#pnr-404 .pnr-404-route-live{
    fill:none;

    stroke:var(--cyan);
    stroke-width:4;

    stroke-linecap:round;

    stroke-dasharray:900;
    stroke-dashoffset:900;

    animation:
        pnr404Route 2.4s .2s
        cubic-bezier(.2,.7,.2,1)
        forwards;
}

@keyframes pnr404Route{
    to{
        stroke-dashoffset:0;
    }
}

#pnr-404 .pnr-404-start{
    fill:var(--cyan);

    filter:
        drop-shadow(
            0 0 8px
            rgba(0,166,223,.55)
        );
}

#pnr-404 .pnr-404-stop circle{
    fill:var(--amber);
}

#pnr-404 .pnr-404-stop path{
    fill:none;

    stroke:var(--navy);
    stroke-width:3.3;
    stroke-linecap:round;
}

#pnr-404 .pnr-404-route-note{
    position:absolute;

    right:24px;
    bottom:24px;

    z-index:6;

    max-width:235px;

    padding:16px 18px;

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

    border-radius:17px;

    background:
        rgba(7,27,53,.78);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

#pnr-404 .pnr-404-route-note strong{
    display:block;

    color:#fff;

    font-family:
        "Space Grotesk",
        "Manrope",
        sans-serif;

    font-size:16px;
    line-height:1.1;
}

#pnr-404 .pnr-404-route-note span{
    display:block;

    margin-top:6px;

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

    font-size:10px;
    line-height:1.5;
}


/* ============================================================
   SHORTCUTS
============================================================ */

#pnr-404 .pnr-404-shortcuts{
    padding:78px 0 112px;

    background:#fff;
}

#pnr-404 .pnr-404-shortcuts-head{
    display:grid;

    grid-template-columns:
        .55fr
        1.45fr;

    gap:60px;
    align-items:end;
}

#pnr-404 .pnr-404-shortcuts-head > span{
    color:var(--blue);

    font-size:10px;
    line-height:1.3;
    font-weight:900;

    letter-spacing:.13em;
    text-transform:uppercase;
}

#pnr-404 .pnr-404-shortcuts h2{
    max-width:740px;

    margin:0;

    color:var(--navy);

    font-family:
        "Space Grotesk",
        "Manrope",
        sans-serif;

    font-size:clamp(38px,4.5vw,62px);
    line-height:1;

    letter-spacing:-.055em;
}

#pnr-404 .pnr-404-shortcuts h2 strong{
    color:var(--blue);
    font-weight:700;
}

#pnr-404 .pnr-404-links{
    display:grid;

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

    gap:14px;

    margin-top:45px;
}

#pnr-404 .pnr-404-link-card{
    min-height:178px;

    display:grid;

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

    gap:17px;
    align-items:start;

    padding:26px 24px;

    border:1px solid var(--line);
    border-radius:23px;

    background:var(--paper);

    transition:
        transform .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

#pnr-404 .pnr-404-link-card:hover{
    transform:translateY(-3px);

    border-color:
        rgba(0,104,180,.20);

    background:#fff;

    box-shadow:
        0 18px 46px
        rgba(7,27,53,.07);
}

#pnr-404 .pnr-404-link-card small{
    min-width:27px;

    color:var(--blue);

    font-size:9px;
    line-height:1.2;
    font-weight:900;

    letter-spacing:.10em;
}

#pnr-404 .pnr-404-link-card strong{
    display:block;

    color:var(--navy);

    font-family:
        "Space Grotesk",
        "Manrope",
        sans-serif;

    font-size:19px;
    line-height:1.16;

    letter-spacing:-.025em;
}

#pnr-404 .pnr-404-link-card span{
    display:block;

    margin-top:9px;

    color:var(--muted);

    font-size:11px;
    line-height:1.58;
}

#pnr-404 .pnr-404-link-card b{
    color:var(--blue);

    font-size:17px;
    line-height:1;

    transition:transform .2s ease;
}

#pnr-404 .pnr-404-link-card:hover b{
    transform:translate(2px,-2px);
}


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

#pnr-404 a:focus-visible{
    outline:
        3px solid
        var(--amber);

    outline-offset:4px;
}


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

@media(max-width:980px){

    #pnr-404 .pnr-404-grid{
        grid-template-columns:1fr;
        gap:52px;
    }

    #pnr-404 .pnr-404-copy{
        max-width:760px;
    }

    #pnr-404 .pnr-404-visual{
        min-height:480px;
    }

    #pnr-404 .pnr-404-shortcuts-head{
        grid-template-columns:1fr;
        gap:15px;
    }

    #pnr-404 .pnr-404-links{
        grid-template-columns:1fr;
    }

    #pnr-404 .pnr-404-link-card{
        min-height:0;
    }

}


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

@media(max-width:680px){

    #pnr-404 .pnr-404-shell{
        width:min(calc(100% - 28px),1180px);
    }

    #pnr-404 .pnr-404-hero{
        padding:48px 0 58px;
    }

    #pnr-404 h1{
        font-size:clamp(52px,16vw,72px);
    }

    #pnr-404 .pnr-404-lead{
        margin-top:22px;

        font-size:16px;
        line-height:1.62;
    }

    #pnr-404 .pnr-404-actions{
        flex-direction:column;
        align-items:stretch;

        margin-top:28px;
    }

    #pnr-404 .pnr-404-btn{
        width:100%;
    }

    #pnr-404 .pnr-404-hint{
        font-size:10px;
    }

    #pnr-404 .pnr-404-visual{
        min-height:370px;

        border-radius:28px;
    }

    #pnr-404 .pnr-404-number{
        font-size:150px;
    }

    #pnr-404 .pnr-404-route{
        inset:24px 12px 52px;

        width:calc(100% - 24px);
        height:calc(100% - 76px);
    }

    #pnr-404 .pnr-404-route-note{
        right:16px;
        bottom:16px;

        max-width:205px;

        padding:13px 15px;
    }

    #pnr-404 .pnr-404-route-note strong{
        font-size:14px;
    }

    #pnr-404 .pnr-404-shortcuts{
        padding:58px 0 82px;
    }

    #pnr-404 .pnr-404-shortcuts h2{
        font-size:clamp(36px,11vw,49px);
    }

    #pnr-404 .pnr-404-links{
        margin-top:32px;
    }

    #pnr-404 .pnr-404-link-card{
        grid-template-columns:
            auto
            minmax(0,1fr)
            auto;

        padding:22px 19px;

        border-radius:19px;
    }

}


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

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

    #pnr-404 *,
    #pnr-404 *::before,
    #pnr-404 *::after{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }

    #pnr-404 .pnr-404-route-live{
        stroke-dashoffset:0!important;
    }

}