*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:radial-gradient(circle at top,#242424,#090909 70%);font-family:Arial,sans-serif;color:#fff}
.portfolio{width:min(92vw,1500px);margin:auto;padding:30px 0 80px}
.page-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px 0}
.page{width:100%;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.55);transition:.5s}
.page:hover{transform:translateY(-4px)}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s}
.reveal.visible{opacity:1;transform:none}
#progress{position:fixed;left:0;top:0;height:4px;background:#fff;width:0;z-index:99}
#sideNav{
position:fixed;
right:28px;
top:50%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
gap:10px;
z-index:50;
font-family:Arial,sans-serif;
}
#sideNav a{
text-decoration:none;
color:#5f5f5f;
font-size:13px;
font-weight:600;
letter-spacing:.15em;
transition:.25s;
padding:2px 4px;
}
#sideNav a:hover{
color:#d0d0d0;
transform:translateX(-3px);
}
#sideNav a.active{
color:#fff;
font-size:18px;
transform:translateX(-8px);
}
.outro{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:24px}
.cta{display:flex;gap:18px;flex-wrap:wrap}
.cta a,.top{text-decoration:none;color:#fff;border:1px solid #444;padding:12px 22px;border-radius:999px}
@media(max-width:900px){#sideNav{display:none}.portfolio{width:100%;padding:12px 8px}.page-wrap{min-height:auto;padding:14px 0}.page{border-radius:4px}}


.topbar{
position:fixed;
top:0;
left:0;
right:0;
height:64px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 32px;
background:rgba(10,10,10,.55);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
z-index:1000;
border-bottom:1px solid rgba(255,255,255,.06);
}
.logo{
font-size:18px;
font-weight:700;
letter-spacing:.35em;
}
.counter{
font-size:14px;
letter-spacing:.25em;
color:#d0d0d0;
}
.contact-btn{
text-decoration:none;
color:#fff;
border:1px solid #444;
padding:10px 18px;
border-radius:999px;
transition:.25s;
}
.contact-btn:hover{
background:#fff;
color:#000;
}
.portfolio{
padding-top:90px;
}
@media(max-width:900px){
.topbar{
padding:0 16px;
height:56px;
}
.logo{font-size:15px;letter-spacing:.2em}
.counter{font-size:12px}
.contact-btn{padding:8px 14px;font-size:12px}
.portfolio{padding-top:72px}
}

/* V2.0 */
#sideNav{display:none !important;}

.topbar{
justify-content:space-between;
padding:0 40px;
background:rgba(8,8,8,.72);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
}

.logo{
font-size:19px;
letter-spacing:.45em;
}

.counter{
margin-left:auto;
font-weight:600;
color:#efefef;
}

.page{
box-shadow:
0 18px 50px rgba(0,0,0,.35),
0 45px 120px rgba(0,0,0,.55);
}

.page-wrap{
padding:18px 0;
}

.outro{
padding:80px 20px;
}

.outro h2{
font-size:2.2rem;
margin-bottom:10px;
}

.outro p{
font-size:1.05rem;
line-height:1.8;
max-width:700px;
}

@media(max-width:900px){
.topbar{
padding:0 18px;
}
.counter{
margin-left:0;
}
}


/* ===== V3.0 Refinements ===== */

html{
    scroll-padding-top:80px;
}

body{
    overflow-x:hidden;
}

.topbar{
    transition:background .35s ease, box-shadow .35s ease;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
}

.portfolio{
    max-width:1600px;
}

.page-wrap{
    scroll-snap-align:start;
}

.page{
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        filter .45s ease;
}

.page:hover{
    transform:translateY(-6px);
    filter:brightness(1.015);
}

.outro{
    border-top:1px solid rgba(255,255,255,.08);
}

.cta a,
.top{
    transition:all .25s ease;
}

.cta a:hover,
.top:hover{
    background:#fff;
    color:#000;
    transform:translateY(-2px);
}


/* ==== V3.1 PREMIUM ==== */
.topbar{
height:50px!important;
padding:0 24px!important;
background:rgba(8,8,8,.48)!important;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.05);
box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.logo{font-size:16px!important;letter-spacing:.35em;}
.counter{font-size:13px!important;opacity:.9;}
.portfolio{padding-top:68px!important;}
.page-wrap{padding:12px 0!important;}
.reveal{
transition:opacity 1.05s cubic-bezier(.22,1,.36,1),
transform 1.05s cubic-bezier(.22,1,.36,1)!important;
}
.page{
transition:transform .55s ease, box-shadow .55s ease!important;
}
.page:hover{
transform:translateY(-3px) scale(1.003)!important;
}
.cta a,.top{
transition:all .3s ease;
}
.cta a:hover,.top:hover{
transform:translateY(-3px);
}



/* ==========================================================
   LOUD WEB V5.1 - Editorial Premium
   ========================================================== */

:root{
 --header-h:52px;
 --shadow-1:0 18px 45px rgba(0,0,0,.18);
 --shadow-2:0 50px 120px rgba(0,0,0,.42);
 --line:rgba(255,255,255,.05);
}

.topbar{
height:var(--header-h)!important;
padding:0 26px!important;
background:rgba(8,8,8,.42)!important;
backdrop-filter:blur(22px)!important;
-webkit-backdrop-filter:blur(22px)!important;
border-bottom:1px solid var(--line)!important;
box-shadow:0 8px 26px rgba(0,0,0,.18)!important;
transition:background .45s ease,backdrop-filter .45s ease,box-shadow .45s ease;
}

.logo{
font-size:15px!important;
font-weight:700;
letter-spacing:.55em!important;
}

.counter{
font-size:12px!important;
letter-spacing:.30em!important;
color:rgba(255,255,255,.82)!important;
transition:opacity .25s ease;
}

.portfolio{
max-width:1700px!important;
padding-top:74px!important;
}

.page-wrap{
padding:26px 0!important;
}

.page{
border-radius:8px!important;
box-shadow:var(--shadow-1),var(--shadow-2)!important;
transition:
transform .55s ease,
box-shadow .55s ease,
filter .55s ease!important;
}

.page:hover{
transform:translateY(-2px)!important;
filter:brightness(1.01)!important;
box-shadow:
0 24px 55px rgba(0,0,0,.22),
0 60px 140px rgba(0,0,0,.46)!important;
}

.reveal{
transition:
opacity 1s cubic-bezier(.22,1,.36,1),
transform 1s cubic-bezier(.22,1,.36,1)!important;
}

#progress{
height:2px!important;
opacity:.75;
}

.outro{
border-top:1px solid rgba(255,255,255,.05);
}

@media(max-width:900px){

.topbar{
height:48px!important;
padding:0 18px!important;
}

.logo{
font-size:14px!important;
letter-spacing:.35em!important;
}

.counter{
font-size:11px!important;
}

.portfolio{
padding-top:66px!important;
}

.page-wrap{
padding:14px 0!important;
}

}