
:root{
  --jade:#10d18c; --jade-600:#0ea371; --jade-700:#0b8b61;
  --pink:#ff3daa; --purple:#7a5cff;
  --ink:#0f172a; --muted:#6b7280; --canvas:#f7f7f5; --paper:#ffffff;
  --radius:16px; --shadow:0 18px 60px rgba(15,23,42,.10);
  --container:1120px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-serif: "Spectral", Georgia, serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.6 var(--font-sans)}
a{color:var(--jade);text-decoration:none} a:hover{text-decoration:underline}
.container{width:min(var(--container),92%);margin-inline:auto}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid #0001}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
.brand img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 3px rgba(16,209,140,.25)}
.menu{display:none;gap:16px}.hamb{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #0002;border-radius:12px;background:#fff}
@media(min-width:880px){.menu{display:flex}.hamb{display:none}}
.badge{display:inline-block;background:rgba(16,209,140,.10);color:#0b8b61;padding:6px 12px;border-radius:999px;font-weight:700;font-size:12px}
.hero{position:relative;overflow:hidden;border-bottom:1px solid #0001;background:#fff}
.hero::before{content:"";position:absolute;inset:0;opacity:.24;background-image:url('assets/img/more_inspiration.png');background-size:cover;background-position:center}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;padding:clamp(48px,8vw,120px) 0}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr}}
.h1{font-family:var(--font-serif);font-size:clamp(2.2rem,1.6rem + 3vw,3rem);line-height:1.05;margin:.2rem 0}
.lead{color:var(--muted);font-size:clamp(1rem,.9rem + .6vw,1.2rem);margin:.5rem 0 1rem}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;font-weight:700;background:var(--jade);color:#fff;box-shadow:var(--shadow)}
.btn:hover{background:var(--jade-600);text-decoration:none}
.grid{display:grid;gap:18px}.grid-3{grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 12;border:1px solid #0001;border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);padding:18px;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 22px 70px rgba(15,23,42,.12)}
@media(min-width:760px){.card{grid-column:span 6}}@media(min-width:1024px){.card{grid-column:span 4}}
.product{display:flex;gap:14px;align-items:flex-start}
.product img{width:96px;height:96px;border-radius:14px;object-fit:cover;background:#f3f3f3}
.price{font-weight:800}
.section{padding:clamp(40px,6vw,80px) 0}
.footer{border-top:1px solid #0001;background:#fff}
.footer small{color:var(--muted)}
.drawer{position:fixed;inset:0 0 0 auto;width:min(320px,82%);background:#fff;box-shadow:-24px 0 60px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .25s ease}
.drawer.open{transform:none}
.drawer .inner{padding:16px}
.drawer a{display:block;padding:10px 0;color:#0f172a;font-weight:600}
