:root{
  --paper:#FFFDF8;--ink:#1C1726;--ink-soft:#5B5566;--brand:#5B3FE3;--tape:#FF6B4A;
  --mint:#16C29C;--kraft:#E4CBA3;--kraft-edge:#C9A874;--line:#E9E2D6;--card:#FFFFFF;--radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:'Bricolage Grotesque',sans-serif;line-height:1.04;letter-spacing:-0.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

nav{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:24px;height:68px}
.logo{font-family:'Bricolage Grotesque';font-weight:800;font-size:22px;letter-spacing:-0.04em;position:relative;display:inline-block;color:var(--ink)}
.logo b{color:var(--brand)}
.logo .tape{position:absolute;top:-6px;right:-14px;background:var(--tape);color:#fff;font-family:'Hanken Grotesk';font-weight:700;font-size:10px;padding:2px 7px;transform:rotate(7deg);letter-spacing:.04em;border-radius:3px}
.nav-search{flex:1;max-width:420px;position:relative}
.nav-search input{width:100%;height:42px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 18px 0 42px;font:inherit;font-size:14px;color:var(--ink)}
.nav-search input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.nav-search svg{position:absolute;left:15px;top:12px;width:18px;height:18px;color:var(--ink-soft)}
.nav-cta{margin-left:auto;font-weight:600;font-size:14px;padding:11px 18px;border:1.5px solid var(--ink);border-radius:999px;white-space:nowrap;transition:.15s;color:var(--ink)}
.nav-cta:hover{background:var(--ink);color:var(--paper)}
@media(max-width:760px){.nav-search{display:none}}

.hero{padding:64px 0 40px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;color:var(--brand);background:#EEE9FE;padding:6px 12px;border-radius:999px;margin-bottom:22px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px #16c29c33}
.hero h1{font-size:clamp(40px,6vw,68px);font-weight:800}
.hero h1 .hl{color:var(--brand);position:relative}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:12px;background:var(--tape);opacity:.35;z-index:-1;border-radius:2px}
.hero p{font-size:18px;color:var(--ink-soft);margin:22px 0 30px;max-width:30em}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{font:inherit;font-weight:700;font-size:15px;padding:14px 24px;border-radius:999px;cursor:pointer;border:none;transition:.15s;display:inline-flex;align-items:center;gap:9px}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px var(--brand)}
.btn-ghost{background:transparent;color:var(--ink);font-weight:600}
.btn-ghost:hover{color:var(--brand)}
.trust{margin-top:34px;display:flex;gap:26px;font-size:13px;color:var(--ink-soft)}
.trust b{color:var(--ink);font-family:'Bricolage Grotesque';font-weight:800;font-size:20px;display:block}

.feature-box{justify-self:center;width:100%;max-width:380px}
.box{position:relative;background:var(--kraft);border-radius:var(--radius);box-shadow:0 26px 50px -20px #1c172633;border:1px solid var(--kraft-edge)}
.box-lid{background:var(--kraft);border-bottom:2px dashed #00000022;border-radius:var(--radius) var(--radius) 0 0;height:54px;position:relative;display:flex;align-items:center;justify-content:center}
.box-lid .seam{width:64px;height:18px;background:var(--tape);border-radius:3px;transform:rotate(-2deg);box-shadow:0 2px 0 #d8512f}
.box-body{background:#fff;margin:0 8px 8px;border-radius:10px;padding:20px}
.box-tag{display:inline-block;background:var(--mint);color:#053d31;font-weight:700;font-size:11px;padding:4px 9px;border-radius:6px;margin-bottom:14px}
.box-body h3{font-size:24px;font-weight:800;margin-bottom:4px}
.box-meta{font-size:13px;color:var(--ink-soft);margin-bottom:16px}
.contents{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.contents li{display:flex;align-items:center;gap:10px;font-size:14px}
.contents .pip{width:18px;height:18px;border-radius:5px;background:#EEE9FE;color:var(--brand);display:grid;place-items:center;font-size:11px;flex-shrink:0;font-weight:700}
.box-price{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px}
.box-price .p{font-family:'Bricolage Grotesque';font-weight:800;font-size:26px}
.box-price .p span{font-size:13px;color:var(--ink-soft);font-weight:400;font-family:'Hanken Grotesk'}
.mini{font-weight:700;font-size:13px;color:var(--brand)}
@media(max-width:860px){.hero{grid-template-columns:1fr;gap:36px;padding-top:40px}.feature-box{order:-1;max-width:340px}}

.filters{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;position:sticky;top:68px;background:var(--paper);z-index:40}
.chips{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{font:inherit;font-weight:600;font-size:14px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:.12s;text-decoration:none;display:inline-block}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"],.chip.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.grid-head{display:flex;align-items:baseline;justify-content:space-between;margin:42px 0 22px;flex-wrap:wrap;gap:8px}
.grid-head h1,.grid-head h2{font-size:30px;font-weight:800}
.grid-head .count{font-size:14px;color:var(--ink-soft)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:64px}
@media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;color:var(--ink)}
.card:hover,.card:focus-within{transform:translateY(-5px);box-shadow:0 22px 40px -22px #1c172655}
.card-top{position:relative;height:128px;background:var(--kraft);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.card-flap{position:absolute;top:0;left:0;right:0;height:46px;background:linear-gradient(#e9d1aa,var(--kraft));border-bottom:2px dashed #00000022;transform-origin:top;transition:transform .28s ease;display:flex;align-items:center;justify-content:center}
.card-flap .t{width:48px;height:14px;background:var(--tape);border-radius:3px;transform:rotate(-3deg)}
.card:hover .card-flap,.card:focus-within .card-flap{transform:rotateX(-104deg)}
.card-peek{position:absolute;bottom:14px;display:flex;gap:6px;opacity:0;transform:translateY(8px);transition:.28s .06s}
.card:hover .card-peek,.card:focus-within .card-peek{opacity:1;transform:translateY(0)}
.card-peek span{width:26px;height:34px;border-radius:5px;background:#fff;box-shadow:0 3px 8px #0002}
.card-peek span:nth-child(2){height:40px;background:#EEE9FE}
.card-peek span:nth-child(3){height:30px;background:#FFE3DB}
.badge{position:absolute;top:10px;left:10px;z-index:2;font-weight:700;font-size:11px;padding:4px 9px;border-radius:6px;background:var(--mint);color:#053d31}
.badge.hot{background:var(--tape);color:#fff}
.card-body{padding:16px 16px 18px;flex:1;display:flex;flex-direction:column}
.card-cat{font-size:12px;font-weight:600;color:var(--brand);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.card-body h3{font-size:19px;font-weight:700;margin-bottom:5px}
.card-desc{font-size:14px;color:var(--ink-soft);flex:1;margin-bottom:14px}
.card-foot{display:flex;align-items:center;justify-content:space-between}
.card-price{font-family:'Bricolage Grotesque';font-weight:800;font-size:18px}
.card-price span{font-size:12px;font-weight:400;color:var(--ink-soft);font-family:'Hanken Grotesk'}
.card-link{font-weight:700;font-size:14px;color:var(--brand);display:inline-flex;align-items:center;gap:5px;transition:gap .15s}
.card:hover .card-link{gap:9px}
.rating{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-soft);margin-bottom:10px}
.rating b{color:var(--ink)}
.empty{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--ink-soft)}

/* detail page */
.detail{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;padding:48px 0;align-items:start}
.detail-visual{position:sticky;top:96px}
.crumb{font-size:13px;color:var(--ink-soft);margin:22px 0 0}
.crumb a{color:var(--brand);font-weight:600}
.detail h1{font-size:clamp(32px,5vw,46px);font-weight:800;margin:6px 0 10px}
.detail .lede{font-size:18px;color:var(--ink-soft);margin-bottom:20px}
.detail .body-copy{font-size:16px;color:var(--ink);margin-bottom:24px;max-width:54ch}
.spec{display:flex;gap:22px;margin-bottom:26px;flex-wrap:wrap}
.spec div b{display:block;font-family:'Bricolage Grotesque';font-weight:800;font-size:22px}
.spec div span{font-size:12px;color:var(--ink-soft)}
.detail .contents{margin-bottom:26px}
.detail .contents li{font-size:15px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.disclosure{font-size:12px;color:var(--ink-soft);margin-top:16px}
@media(max-width:860px){.detail{grid-template-columns:1fr;gap:8px}.detail-visual{position:static;max-width:360px;margin:0 auto}}

.auto{background:var(--ink);color:var(--paper);border-radius:20px;padding:40px;margin:10px 0 70px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.auto h2{font-size:26px;font-weight:800;margin-bottom:8px}
.auto p{color:#b9b2c4;max-width:46ch;font-size:15px}
.auto-stats{display:flex;gap:34px}
.auto-stats div b{display:block;font-family:'Bricolage Grotesque';font-weight:800;font-size:30px;color:var(--mint)}
.auto-stats div span{font-size:12px;color:#b9b2c4}
@media(max-width:760px){.auto{grid-template-columns:1fr;padding:28px}}

footer{border-top:1px solid var(--line);padding:34px 0;font-size:13px;color:var(--ink-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .card:hover .card-flap{transform:none}
  .card:hover .card-peek{opacity:1;transform:none}
}