:root{
    --green:#008f47;
    --pink:#d928a7;
    --dark:#111111;
    --cream:#f7f1ea;
    --light:#f7f7f7;
    --text:#242424;
    --muted:#6f6f6f;
    --glass:rgba(255,255,255,.18);
    --border:rgba(255,255,255,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:Inter,Arial,sans-serif;
    color:var(--text);
    background:#f4f4f4;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.navbar{
    position:fixed;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    width:min(1180px,92%);
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:10px 14px;
    border-radius:30px;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(255,255,255,.62);
    backdrop-filter:blur(20px);
    box-shadow:0 22px 70px rgba(0,0,0,.13);
}
.logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:172px;
    height:58px;
    padding:8px 18px;
    border-radius:22px;
    background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(247,241,234,.78));
    border:1px solid rgba(0,143,71,.13);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 10px 28px rgba(0,143,71,.10);
}
.logo img{
    width:138px;
    height:auto;
    max-height:42px;
    object-fit:contain;
    display:block;
    mix-blend-mode:multiply;
}
.menu{
    display:flex;
    align-items:center;
    gap:22px;
    font-size:14px;
    font-weight:600;
}
.menu a{color:#222}
.menu a:hover{color:var(--green)}
.nav-cta{
    padding:14px 22px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--green),#06a85a);
    color:#fff!important;
    box-shadow:0 10px 28px rgba(0,143,71,.24);
}
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:140px 7% 80px;
    color:#fff;
    background:
    linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.18)),
    var(--hero);
    background-size:cover;
    background-position:center;
}
.hero-box{
    max-width:820px;
    padding:54px;
    border-radius:34px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.28);
    backdrop-filter:blur(16px);
    box-shadow:0 30px 80px rgba(0,0,0,.24);
}
.kicker{
    display:inline-block;
    margin-bottom:18px;
    padding:9px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.25);
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
}
h1,h2,h3{
    font-family:'Playfair Display',serif;
    line-height:1.08;
}
h1{font-size:68px;margin-bottom:22px}
.hero p{font-size:19px;line-height:1.75;max-width:720px}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 22px;
    border-radius:999px;
    font-weight:700;
    border:1px solid rgba(255,255,255,.35);
}
.btn-primary{background:var(--green);color:#fff}
.btn-light{background:rgba(255,255,255,.17);color:#fff;backdrop-filter:blur(10px)}
.section{padding:92px 7%}
.section.alt{background:var(--cream)}
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:42px;
}
.section-head h2{font-size:46px}
.section-head p,.lead{
    color:var(--muted);
    line-height:1.8;
    max-width:760px;
}
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:26px;
}
.glass-card{
    position:relative;
    overflow:hidden;
    min-height:360px;
    border-radius:30px;
    box-shadow:0 22px 60px rgba(0,0,0,.1);
    transition:.35s ease;
    background:#fff;
}
.glass-card:hover{transform:translateY(-8px)}
.glass-card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.glass-card:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.08));
}
.card-content{
    position:absolute;
    z-index:2;
    bottom:0;
    padding:32px;
    color:#fff;
}
.card-content h3{font-size:29px;margin-bottom:12px}
.card-content p{line-height:1.7;color:rgba(255,255,255,.9)}
.product{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 18px 48px rgba(0,0,0,.08);
    transition:.35s;
}
.product:hover{transform:translateY(-7px)}
.product img{height:250px;width:100%;object-fit:cover}
.product-body{padding:24px}
.product-body h3{font-size:25px;margin-bottom:10px}
.price{color:var(--green);font-weight:800;margin-top:12px}
.tag{
    display:inline-block;
    margin-bottom:12px;
    padding:7px 12px;
    border-radius:999px;
    background:#eef7f1;
    color:var(--green);
    font-size:12px;
    font-weight:700;
}
.slider{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:26px;
}
.feature{
    border-radius:34px;
    min-height:560px;
    background:
    linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.05)),
    url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?q=80&w=1600&auto=format&fit=crop');
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:end;
    padding:44px;
    color:#fff;
}
.side-list{display:grid;gap:22px}
.side-item{
    padding:28px;
    border-radius:28px;
    background:rgba(255,255,255,.76);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 18px 45px rgba(0,0,0,.08);
}
.side-item h3{font-size:27px;margin-bottom:8px}
.side-item p{color:var(--muted);line-height:1.7}
.blog-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 18px 48px rgba(0,0,0,.08);
}
.blog-card img{height:240px;width:100%;object-fit:cover}
.blog-card div{padding:26px}
.blog-card h3{font-size:26px;margin-bottom:12px}
.blog-card p{color:var(--muted);line-height:1.7}
.page-hero{
    min-height:56vh;
    padding:150px 7% 80px;
    color:#fff;
    display:flex;
    align-items:end;
    background:
    linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.12)),
    var(--hero);
    background-size:cover;
    background-position:center;
}
.page-hero div{max-width:820px}
.page-hero h1{font-size:58px}
.content-box{
    background:#fff;
    border-radius:30px;
    padding:42px;
    box-shadow:0 18px 48px rgba(0,0,0,.08);
}
.content-box p,.content-box li{line-height:1.9;color:#5e5e5e}
.content-box ul{padding-left:22px;margin-top:18px}
.form{
    display:grid;
    gap:16px;
}
.form input,.form textarea,.form select{
    width:100%;
    padding:16px 18px;
    border:1px solid #ddd;
    border-radius:18px;
    font-family:inherit;
}
.form button{
    border:0;
    padding:16px 22px;
    border-radius:999px;
    background:var(--green);
    color:#fff;
    font-weight:800;
}
footer{
    background:#0d0d0d;
    color:#fff;
    padding:70px 7% 35px;
}
.footer-grid{
    display:grid;
    grid-template-columns:1.4fr repeat(3,1fr);
    gap:36px;
    margin-bottom:44px;
}
footer h3{font-size:30px;margin-bottom:16px}
footer p,footer a{color:#bdbdbd;line-height:1.9;display:block}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;color:#909090}
@media(max-width:900px){
    .menu{display:none}
    .navbar{top:12px;width:94%;padding:9px 10px}
    .logo{min-width:148px;height:52px;padding:7px 14px}
    .logo img{width:118px;max-height:36px}
    h1{font-size:46px}
    .hero-box{padding:34px}
    .slider{grid-template-columns:1fr}
    .section-head{display:block}
    .footer-grid{grid-template-columns:1fr}
}