:root { --ink:#141414; --acc:#16a34a; --paper:#ffffff; --soft:#f4f4f2; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Inter",system-ui,sans-serif; color:var(--ink); background:var(--paper); }
a { color:inherit; cursor:pointer; }
.rnav { display:flex; align-items:center; gap:24px; padding:16px 28px; border-bottom:1px solid #ececec; position:sticky; top:38px; background:#fff; z-index:10; }
.rnav .logo { font-weight:900; font-size:24px; letter-spacing:-.04em; }
.rnav a { text-decoration:none; font-weight:600; font-size:15px; }
.rnav .spacer { margin-left:auto; }
.rnav .bag { position:relative; font-weight:700; }
.rnav .bag .n { background:var(--ink); color:#fff; border-radius:999px; font-size:11px; padding:1px 7px; margin-left:4px; }
.rhero { padding:80px 24px; text-align:center; background:var(--soft); }
.rhero h1 { font-size:52px; margin:0 0 12px; letter-spacing:-.05em; }
.rhero p { font-size:19px; color:#555; margin:0 auto 26px; max-width:560px; }
.rbtn { display:inline-block; background:var(--ink); color:#fff; border:0; border-radius:8px; padding:14px 28px; font-weight:700; font-size:16px; cursor:pointer; text-decoration:none; }
.rbtn.acc { background:var(--acc); }
.rbtn.ghost { background:#fff; color:var(--ink); border:1.5px solid var(--ink); }
.rwrap { max-width:1000px; margin:0 auto; padding:44px 24px; }
.rgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px; }
.rcard { border:1px solid #ececec; border-radius:16px; padding:22px; text-align:center; }
.rcard .emoji { font-size:58px; }
.rcard h3 { margin:12px 0 2px; font-size:16px; }
.rcard .price { color:#555; font-weight:700; }
.rline { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid #eee; }
.rline .grow { flex:1; }
.rtotal { display:flex; justify-content:space-between; font-size:22px; font-weight:800; margin:18px 0; }
.badge { display:inline-block; font-size:12px; font-weight:700; color:var(--acc); background:#e9f9ef; padding:3px 10px; border-radius:999px; }
.rfoot { text-align:center; color:#999; font-size:13px; padding:30px; }
@media (max-width:640px){ .rhero h1{font-size:38px} }