:root { --bg:#fbf7f1; --ink:#2b1d14; --muted:#6f5b4c; --accent:#b4532a; --card:#fff; --line:#eadfd3; }
@media (prefers-color-scheme: dark) { :root { --bg:#17120e; --ink:#f3e9df; --muted:#b9a797; --accent:#e0804f; --card:#211a15; --line:#352a22; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 Inter, system-ui, sans-serif; }
a { color:var(--accent); }
h1, h2, h3 { font-family:Fraunces, Georgia, serif; line-height:1.2; }
.banner { background:var(--ink); color:var(--bg); padding:10px 16px; font-size:14px; text-align:center; }
.banner a { color:#ffd9c2; font-weight:600; margin-left:6px; }
.top { display:flex; align-items:center; gap:24px; padding:18px clamp(16px,5vw,64px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-family:Fraunces, serif; font-size:22px; color:var(--ink); text-decoration:none; }
nav { display:flex; gap:18px; margin-left:auto; }
nav a { color:var(--muted); text-decoration:none; }
.cart { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:6px 14px; font:inherit; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; padding:56px clamp(16px,5vw,64px); }
.hero h1 { font-size:clamp(32px,5vw,54px); margin:0 0 12px; }
.hero p { color:var(--muted); font-size:18px; }
.hero img { width:100%; height:auto; border-radius:16px; }
.btn { display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:10px; padding:12px 22px; font:inherit; font-weight:600; text-decoration:none; cursor:pointer; }
.btn.small { padding:8px 14px; }
.grid, .video { padding:24px clamp(16px,5vw,64px) 48px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.card img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; }
.card h3, .card p { margin:12px 16px 0; }
.card p { color:var(--muted); }
.buy { display:flex; justify-content:space-between; align-items:center; padding:14px 16px 16px; font-weight:600; }
.video iframe { width:100%; max-width:860px; aspect-ratio:16/9; border:0; border-radius:14px; }
footer { border-top:1px solid var(--line); padding:24px clamp(16px,5vw,64px); color:var(--muted); font-size:14px; }
@media (max-width: 760px) { .hero { grid-template-columns:1fr; } nav { display:none; } }