:root{
  --bg:#F3F4F6;--ink:#0E1116;--muted:#4A5160;--lime:#CFF53B;--blue:#2F5BFF;--line:#E1E3E8;
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px 56px}

/* header / footer */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:28px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:40px;height:40px;border-radius:12px;background:var(--ink);color:var(--lime);display:flex;align-items:center;justify-content:center;font:500 15px var(--font-mono)}
.brand-name{font:700 22px var(--font-display);letter-spacing:-.01em}
.nav{display:flex;align-items:center;gap:10px}
.nav-ext{font-size:15px;font-weight:500;color:var(--muted);padding:10px 14px}
.pill-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:10px 18px;min-height:44px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink)}
.pill-btn:hover{background:var(--ink);color:#fff}
.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:48px 0 0;font-size:14px;color:var(--muted)}
.site-footer a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* hero */
.hero{padding:64px 0 56px;display:flex;flex-direction:column;gap:24px;max-width:820px}
.eyebrow{font:400 13px var(--font-mono);letter-spacing:.04em;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;background:#1E9E4A}
.hero h1{margin:0;font:700 76px/1 var(--font-display);letter-spacing:-.035em}
.hero p{margin:0;font-size:20px;line-height:1.5;color:var(--muted);max-width:600px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:240px;gap:16px}
.c-big{grid-column:span 2;grid-row:span 2}
.c-wide{grid-column:span 2}
.card{border-radius:24px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}
a.card{transition:transform .18s ease,box-shadow .18s ease}
a.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(14,17,22,.45)}
.card-top{display:flex;align-items:center;justify-content:space-between}
.card h2{margin:0;font:700 24px var(--font-display);letter-spacing:-.01em}
.card p{margin:6px 0 0;font-size:15px;line-height:1.45}
.soon{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.card svg{width:40px;height:40px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card-feature{background:var(--ink);color:#fff;gap:20px}
.card-feature h2{font-size:34px;letter-spacing:-.02em}
.card-feature p{color:#AEB4C2;max-width:360px;font-size:16px;margin-top:8px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.live{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--lime);color:var(--ink);padding:6px 12px;border-radius:999px;white-space:nowrap}
.open{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--lime)}
.open svg{width:18px;height:18px;stroke:currentColor;stroke-width:2}
.mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;font:400 12.5px/1.7 var(--font-mono)}
.mini>div{background:#181C24;border-radius:14px;padding:14px 0;overflow:hidden}
.mini span{display:block;padding:0 14px;color:#8A92A3;white-space:nowrap}
.mini .del{background:#4A1D1D;color:#FFB4AA}
.mini .add{background:#17381F;color:#9BE8AE}
.swatches{display:flex;gap:8px}
.swatches i{width:40px;height:40px;border-radius:12px;display:block}

@media (max-width:1000px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(220px,auto)}
  .c-big,.c-wide{grid-column:auto;grid-row:auto}
  .hero h1{font-size:44px}
  .nav-ext{display:none}
}