body { position:relative; background:#252824; color:#fff; }
.backdrop { position:absolute; inset:0; background:url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1900&q=88') center 54%/cover; transform:scale(1.02); }
.shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,14,11,.66),rgba(10,14,11,.08) 57%,rgba(10,14,11,.28)),linear-gradient(0deg,rgba(8,11,9,.5),transparent 45%); }
header { height:13vh; min-height:42px; position:relative; z-index:5; display:flex; align-items:center; padding:0 4.5vw; border-bottom:1px solid rgba(255,255,255,.26); }
.brand { font:600 clamp(10px,1.65vw,25px) 'Manrope'; letter-spacing:-.05em; }
.brand span { color:#d7c7a8; }
.demo-nav { margin:auto; display:flex; gap:clamp(8px,2.3vw,37px); font-size:clamp(5px,.68vw,11px); }
.language { font-size:clamp(5px,.65vw,10px); }
.language span { color:#988c77; margin:0 .5vw; }
main { height:73vh; position:relative; z-index:3; padding:clamp(12px,4vh,38px) 4.5vw 0; }
.project-label { display:flex; align-items:center; gap:1.2vw; }
.project-label span { font-size:clamp(4px,.5vw,8px); letter-spacing:.16em; color:#d5d8d3; }
.project-label b { font:500 clamp(6px,.78vw,12px) 'Manrope'; }
h1 { margin:clamp(11px,4vh,38px) 0 0; font:500 clamp(30px,6vw,91px)/.9 'Manrope'; letter-spacing:-.075em; }
h1 em { font-family:'Playfair Display',serif; font-weight:500; color:#dfd1b6; }
.view-project { position:absolute; left:4.5vw; bottom:4vh; display:flex; align-items:center; gap:1.5vw; font-size:clamp(5px,.7vw,11px); }
.view-project span { border-bottom:1px solid rgba(255,255,255,.7); padding-bottom:.4vw; }
.view-project b { width:clamp(18px,2.8vw,42px); height:clamp(18px,2.8vw,42px); display:grid; place-items:center; border:1px solid rgba(255,255,255,.65); border-radius:50%; font-weight:400; }
.project-data { position:absolute; right:4vw; bottom:3vh; width:34%; display:grid; grid-template-columns:repeat(3,1fr); background:rgba(21,27,23,.79); backdrop-filter:blur(7px); }
.project-data>div { padding:clamp(8px,1.5vw,22px); border-right:1px solid rgba(255,255,255,.15); }
.project-data small { display:block; font-size:clamp(3px,.42vw,7px); letter-spacing:.16em; color:#a7afa9; }
.project-data b { display:block; margin-top:.7vh; font:500 clamp(6px,.85vw,13px) 'Manrope'; }
.counter { position:absolute; right:4.5vw; top:4vh; display:flex; align-items:center; gap:1vw; }
.counter b { font:500 clamp(14px,2.7vw,41px) 'Manrope'; }
.counter span { width:5vw; height:1px; background:rgba(255,255,255,.7); }
.counter small { font-size:clamp(4px,.55vw,9px); }
footer { height:14vh; min-height:34px; position:relative; z-index:4; display:flex; align-items:center; gap:4vw; padding:0 4.5vw; background:#1e221f; font-size:clamp(4px,.56vw,9px); letter-spacing:.14em; }
footer b { margin-left:auto; color:#79837d; font-weight:400; text-transform:none; letter-spacing:0; }