* {
    box-sizing:border-box;
}

html{scroll-behavior:smooth;}

body{
    margin:0;
    font-family:Inter,Arial,sans-serif;
    color:#222;
    background:#fff;
    line-height:1.7;
    overflow-x:hidden;
}

:root{
    --w:1500px;
    --hero-width:1400px;
    --b:#e8e8e8;
    --header-height:84px;
}

a{color:inherit;text-decoration:none;}

.container{
    width:100%;
    max-width:var(--w);
    margin:0 auto;
    padding:0 48px;
}
.hero .container{width:100%;max-width:var(--hero-width);margin:0 auto;padding:0 48px;}

.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--b);}
.nav{height:var(--header-height);display:flex;justify-content:space-between;align-items:center;}
.brand{font-weight:700;font-size:18px;transition:.25s;}
.brand:hover{opacity:.65;}
nav{display:flex;gap:36px;}
nav a{color:#666;transition:.25s;}
nav a:hover,nav a.active{color:#111;}

.hero{
    min-height:calc(100vh - var(--header-height));
    display:flex;
    align-items:center;
    padding:28px 0 40px;
}

.hero h1{
    max-width:1250px;
    font-size:clamp(52px,6vw,82px);
    line-height:1.02;
    font-weight:700;
    letter-spacing:-.04em;
}

.lead{
    margin-top:26px;
    margin-bottom:24px;
    max-width:820px;
    font-size:1.25rem;
    line-height:1.55;
    color:#666;
}

.button{
    display:inline-block;
    margin-top:24px;
    padding:14px 30px;
    border:1px solid #222;
    transition:.25s;
}
.button:hover{background:#222;color:#fff;}

section:not(.hero){min-height:calc(100vh - var(--header-height));padding:80px 0;scroll-margin-top:var(--header-height);}
.feature{
    border-bottom:1px solid var(--b);
}
section h2{margin:0 0 28px;font-size:3rem;line-height:1.05;}
.feature h2{font-size:2.35rem;font-weight:700;letter-spacing:-.02em;margin-bottom:20px;}
.feature>.container>.lead{font-size:1.15rem;color:#777;max-width:900px;margin-bottom:90px;}
section p{max-width:760px;}

.project{padding:60px 0;}
.project h3{margin:0;font-size:2.8rem;line-height:1.08;letter-spacing:-.03em;}
.project-role{display:inline-block;color:#8a8a8a;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;padding-bottom:12px;margin:0 0 24px;border-bottom:1px solid #d9d9d9;}
.project-role::after{content:"";display:block;width:72px;height:1px;background:#d9d9d9;margin:16px 0 24px;}
.project p{margin:0;max-width:760px;font-size:1.12rem;line-height:1.85;color:#444;}

#demo{
    padding-top:25px;
}

.selected-work-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:20px;
}

.work-card{
    border:1px solid var(--b);
    background:#fff;
    padding:14px;
    transition:.25s ease;
    min-width:0;
}

.work-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.work-thumb{
width:100%;
aspect-ratio:1/1;
margin-bottom:12px;
background:#fff;
border:1px solid var(--b);
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}

.work-thumb img{
width:100%;
height:100%;
object-fit:contain;
padding:18px;
display:block;
}

.work-card h3{
margin:0 0 8px;
font-size:1rem;
line-height:1.2;
min-height:2.4em;
display:flex;
align-items:flex-start;
}

.work-card p{
margin:0;
font-size:.9rem;
color:#666;
min-height:2.2em;
}

.work-card a{display:none;}

footer{padding:60px 0;border-top:1px solid var(--b);text-align:center;color:#666;}
.reveal{opacity:0;transform:translateY(28px);transition:.7s;}
.reveal.visible{opacity:1;transform:none;}

@media (max-width:900px){
.container,.hero .container{padding:0 24px;}
.nav{
    height:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:16px 0;
}
nav{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    font-size:.95rem;
}
.hero,section:not(.hero){min-height:auto;padding:72px 0;}
h1{font-size:3.3rem;}
.lead{font-size:1.15rem;}
section h2{font-size:2.2rem;}
.project{padding:44px 0;}
.project h3{font-size:2rem;}
.project-role{margin:0;}
.project p{font-size:1.05rem;}

.selected-work-grid{
grid-template-columns:repeat(2,1fr);
gap:16px;
}

.work-card{padding:12px;}
.work-card h3{font-size:.95rem;min-height:2.4em;}
.work-card p{font-size:.85rem;min-height:2.2em;}
}