:root{
    --bg:#fff;
    --surface:#f5f5f3;
    --card:#fff;
    --text:#181818;
    --muted:#727272;
    --accent:#171717;
    --accentText:#fff;
    --line:#e5e5e3;
    --header:#ffffffed
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    font-family:'DM Sans',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.65
}
a{
    color:inherit;
    text-decoration:none
}
button,input,textarea{
    font:inherit
}
img{
    max-width:100%;
    display:block
}
h1,h2,h3,p{
    margin-top:0
}
h1,h2,h3{
    line-height:1.12;
    letter-spacing:-.045em
}
h1{
    font-size:clamp(3rem,6vw,6rem)
}
h2{
    font-size:clamp(2.2rem,4vw,3.7rem)
}
h3{
    font-size:1.35rem
}
p{
    color:var(--muted)
}
.container{
    width:min(1160px,calc(100% - 44px));
    margin:auto
}
.site-header{
    position:sticky;
    top:0;
    z-index:20;
    background:var(--header);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line)
}
.nav{
    min-height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}
.brand{
    font-family:Manrope,sans-serif;
    font-weight:800;
    font-size:1.25rem;
    letter-spacing:-.05em
}
.nav-links{
    display:flex;
    gap:26px;
    align-items:center;
    font-size:.91rem;
    font-weight:700
}
.nav-links a:hover{
    color:var(--accent)
}
.menu-toggle{
    display:none;
    background:none;
    border:1px solid var(--line);
    color:var(--text);
    padding:8px 12px;
    border-radius:9px;
    cursor:pointer
}
.section{
    padding:110px 0
}
.section-alt{
    background:var(--surface)
}
.eyebrow{
    text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--accent);
    font-size:.73rem;
    font-weight:800;
    margin-bottom:20px
}
.lead{
    font-size:1.15rem;
    max-width:620px
}
.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    padding:15px 24px;
    border-radius:6px;
    font-weight:800;
    background:var(--accent);
    color:var(--accentText);
    border:1px solid var(--accent);
    transition:transform .2s,opacity .2s
}
.btn:hover{
    transform:translateY(-3px);
    opacity:.9
}
.btn-outline{
    background:transparent;
    color:var(--text);
    border-color:var(--line)
}
.actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:32px
}
.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px
}
.card{
    border:1px solid var(--line);
    background:var(--card);
    padding:30px;
    border-radius:12px
}
.card p:last-child{
    margin-bottom:0
}
.card .num{
    font-size:.75rem;
    font-weight:800;
    color:var(--accent);
    letter-spacing:.16em
}
.tag{
    display:inline-block;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    border:1px solid var(--line);
    padding:7px 12px;
    border-radius:30px;
    margin-bottom:18px
}
.hero{
    min-height:calc(88vh - 80px);
    display:flex;
    align-items:center;
    padding:95px 0
}
.hero-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:65px;
    align-items:center
}
.hero-visual{
    height:520px;
    position:relative;
    overflow:hidden;
    border-radius:12px;
    background:var(--surface)
}
.hero-visual img{
    width:100%;
    height:100%;
    object-fit:cover
}
.hero-visual:after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(0,0,0,.18),transparent 60%);
    pointer-events:none
}
.section-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:28px;
    margin-bottom:44px
}
.section-heading p{
    max-width:440px
}
.footer{
    border-top:1px solid var(--line);
    padding:35px 0;
    font-size:.8rem
}
.foot-inner{
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    color:var(--muted)
}
.foot-inner strong{
    color:var(--text)
}
.reveal{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .65s,transform .65s
}
.reveal.visible{
    opacity:1;
    transform:none
}
.full-bleed{
    height:400px;
    object-fit:cover;
    width:100%;
    border-radius:12px
}
.notice{
    background:var(--surface);
    border-left:3px solid var(--accent);
    padding:15px 20px;
    color:var(--muted);
    font-size:.85rem
}
.price{
    font-size:2.5rem;
    font-weight:800;
    letter-spacing:-.06em;
    color:var(--text)
}
.features{
    list-style:none;
    padding:0;
    margin:20px 0 30px
}
.features li{
    padding:9px 0;
    border-bottom:1px solid var(--line);
    font-size:.91rem
}
.features li:before{
    content:'✓';
    color:var(--accent);
    font-weight:900;
    margin-right:10px
}
.pill{
    display:inline-block;
    padding:7px 12px;
    border-radius:99px;
    background:var(--surface);
    border:1px solid var(--line);
    margin:5px 5px 5px 0;
    font-size:.82rem;
    font-weight:700
}
.contact-box{
    padding:65px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px
}
.demo-ribbon{
    background:var(--accent);
    color:var(--accentText);
    text-align:center;
    padding:7px 15px;
    font-size:.73rem;
    letter-spacing:.04em;
    font-weight:800
}
@media(max-width:850px){
    .hero-grid,.grid-2{
        grid-template-columns:1fr
    }
    .hero{
        min-height:auto
    }
    .hero-visual{
        height:430px
    }
    .grid-3{
        grid-template-columns:1fr 1fr
    }
    .nav-links{
        display:none;
        position:absolute;
        top:80px;
        left:0;
        right:0;
        background:var(--bg);
        padding:25px;
        flex-direction:column;
        align-items:stretch;
        border-bottom:1px solid var(--line)
    }
    .nav-links.open{
        display:flex
    }
    .menu-toggle{
        display:block
    }
    .section{
        padding:75px 0
    }
    .section-heading{
        display:block
    }
}
@media(max-width:600px){
    .container{
        width:min(100% - 34px,1160px)
    }
    .grid-3{
        grid-template-columns:1fr
    }
    .hero{
        padding:65px 0
    }
    .hero-visual{
        height:350px
    }
    .contact-box{
        padding:30px
    }
    .nav{
        min-height:70px
    }
    .nav-links{
        top:70px
    }
    .section{
        padding:65px 0
    }
}
@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{
        scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important
    }
    .reveal{
        opacity:1;
        transform:none
    }
}
.hero-visual{
    background:#e8e8e6
}
.hero-visual img{
    object-position:center 33%
}
.project-preview{
    height:210px;
    overflow:hidden;
    border-radius:8px;
    background:#eee;
    position:relative
}
.project-preview img{
    height:100%;
    width:100%;
    object-fit:cover;
    transition:transform .4s
}
.project-preview:hover img{
    transform:scale(1.05)
}
.project-card{
    padding:14px
}
.project-card h3{
    margin:20px 0 8px
}
.project-card .btn{
    margin-top:14px
}
.big-index{
    font-size:clamp(5rem,11vw,11rem);
    font-weight:800;
    letter-spacing:-.1em;
    line-height:.85;
    color:#e5e5e5
}
.about-grid{
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:60px;
    align-items:start
}
.contact-box h2{
    max-width:720px
}
.plan-featured{
    border:2px solid #111
}
@media(max-width:850px){
    .about-grid{
        grid-template-columns:1fr
    }
}