@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --ink:#17231d; --muted:#68736d; --paper:#f7f8f4; --line:#e1e6df; --green:#587a67; --deep:#244a38; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; }
.section-shell { width:min(1160px, calc(100% - 48px)); margin:0 auto; }
.topbar { height:82px; border-bottom:1px solid var(--line); background:rgba(247,248,244,.92); }
.nav-wrap { height:100%; display:flex; justify-content:space-between; align-items:center; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:17px; letter-spacing:-.03em; }
.brand strong { font-weight:700; }
.brand-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:9px 9px 9px 2px; background:var(--deep); color:#fff; font-size:12px; font-weight:700; letter-spacing:-.08em; }
.member-status { color:var(--muted); font-size:12px; letter-spacing:.02em; display:flex; gap:8px; align-items:center; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#78a881; box-shadow:0 0 0 4px #e4eee4; }
.hero { padding:92px 0 74px; position:relative; }
.eyebrow { color:var(--green); font-size:10px; font-weight:700; letter-spacing:.2em; }
h1,h2,h3,p { margin-top:0; }
h1 { margin:17px 0 20px; font-size:clamp(47px, 7vw, 78px); line-height:.98; letter-spacing:-.065em; font-weight:500; }
h1 em { color:var(--green); font-family:'Playfair Display',serif; font-weight:500; letter-spacing:-.06em; }
.hero-copy { max-width:410px; margin:0; color:var(--muted); font-size:15px; line-height:1.7; }
.hero-line { position:absolute; right:0; bottom:0; width:36%; height:1px; background:var(--line); }
.products { padding:62px 0 100px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:27px; }
h2 { margin:10px 0 0; font-size:27px; letter-spacing:-.05em; font-weight:600; }
.product-count { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.product-card { min-height:485px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; transition:transform .2s, box-shadow .2s; }
.product-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(28,54,40,.08); }
.banner-slot { aspect-ratio:2 / 3; overflow:hidden; display:grid; place-items:center; background:#07150d; color:#47705a; font-size:10px; font-weight:700; letter-spacing:.16em; }
.banner-slot img { width:100%; height:100%; display:block; object-fit:contain; }
.card-blue .banner-slot { background:#07150d; color:#507486; }
.card-orange .banner-slot { background:#07150d; color:#996b4f; }
.card-body { padding:25px 25px 24px; }
.card-number { color:var(--green); font-size:10px; font-weight:700; letter-spacing:.1em; }
.card-number span { color:#9ca7a0; font-weight:500; margin-left:5px; }
h3 { margin:16px 0 10px; font-size:27px; line-height:1.03; letter-spacing:-.06em; font-weight:400; }
h3 strong { font-family:'Playfair Display',serif; color:var(--green); font-style:italic; font-weight:500; }
.card-blue h3 strong { color:#66899a; }
.card-orange h3 strong { color:#a87859; }
.card-body p { min-height:48px; margin-bottom:22px; color:var(--muted); font-size:12px; line-height:1.55; }
.access-button { display:flex; justify-content:space-between; align-items:center; padding:13px 15px; border-radius:6px; background:var(--deep); color:#fff; text-decoration:none; font-size:11px; font-weight:600; transition:background .2s; }
.access-button:hover { background:#37684e; }
.access-button span { font-size:17px; font-weight:400; }
.notice { display:flex; gap:9px; align-items:center; margin:28px 0 0; color:#8a948d; font-size:11px; }
.notice span { display:grid; place-items:center; width:15px; height:15px; border:1px solid #aeb9b0; border-radius:50%; font-size:10px; }
.site-footer { border-top:1px solid var(--line); background:#eef2ed; }
.footer-main { display:grid; grid-template-columns:2fr 1fr 1.4fr 1.4fr; gap:36px; padding:52px 0 48px; }
.footer-company p { max-width:235px; margin:17px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.footer-column { display:flex; flex-direction:column; gap:10px; }
.footer-column h2 { margin:0 0 8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.footer-column a,.footer-column span { color:var(--muted); font-size:12px; text-decoration:none; line-height:1.35; }
.footer-column a:hover { color:var(--deep); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding:17px 0; border-top:1px solid #dce3dc; color:#8a948d; font-size:10px; }
@media (max-width:760px) { .section-shell { width:min(100% - 32px, 540px); } .hero { padding:65px 0 55px; } .hero-line { width:25%; } .products { padding:45px 0 70px; } .product-grid { grid-template-columns:1fr; gap:14px; } .product-card { min-height:0; } .banner-slot { aspect-ratio:2 / 3; } .footer-main { grid-template-columns:1fr 1fr; gap:30px 20px; } .footer-company { grid-column:1/-1; } .footer-bottom { flex-direction:column; gap:7px; } }
@media (max-width:420px) { .member-status { display:none; } .footer-main { grid-template-columns:1fr; } }