:root{
  --brand:#F59E0B;
  --ink:#0F172A;
  --text:#111827;
  --muted:#6B7280;
  --bg:#FFFFFF;
  --surface:#F8FAFC;
  --sand:#FFF7ED;
  --line:#E5E7EB;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:40px; --s6:48px; --s7:56px; --s8:64px;

  --r1:10px; --r2:14px; --r3:20px;

  --font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --container: 1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:1rem;
  line-height:1.6;
  color:var(--text);
  background:linear-gradient(180deg,var(--sand),var(--bg));
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

.container{width:min(100% - (var(--s3)*2), var(--container));margin-inline:auto}
.section{padding-block:var(--s6)}
.flow>*+*{margin-top:var(--s2)}
.grid{display:grid;gap:var(--s3)}
@media(min-width:900px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}}

.site-header{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 92%,var(--sand));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.navbar{display:flex;align-items:center;justify-content:space-between;padding-block:var(--s2);gap:var(--s2)}
.brand{font-weight:900;letter-spacing:-0.02em;text-decoration:none}
.navlinks{display:none;gap:var(--s2);align-items:center}
.navlinks a{padding:var(--s1) var(--s2);border-radius:999px;text-decoration:none}
.navlinks a:hover{background:var(--surface)}

.nav-toggle summary{
  list-style:none;cursor:pointer;
  padding:var(--s1) var(--s2);
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg);
}
.nav-toggle summary::-webkit-details-marker{display:none}
.nav-panel{margin-top:var(--s2);display:grid;gap:var(--s1)}
.nav-panel a{padding:var(--s2);border:1px solid var(--line);border-radius:var(--r2);text-decoration:none;background:var(--bg)}
@media(min-width:780px){.navlinks{display:flex}.nav-toggle{display:none}}

.hero h1{font-size:clamp(1.9rem, 2.6vw + 1.1rem, 2.7rem);line-height:1.1;margin:0;color:var(--ink)}
.kicker{color:var(--muted);max-width:70ch}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;
  padding:0 var(--s3);
  border-radius:999px;
  border:1px solid transparent;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.btn.primary{background:var(--brand);color:#111}
.btn.primary:hover{filter:brightness(.97)}
.btn.ghost{background:var(--bg);border-color:var(--line)}
.btnrow{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.cardpad{padding:var(--s3)}
.card h2,.card h3{margin:0;line-height:1.2}
.meta{color:var(--muted);font-size:.95em}
.badge{display:inline-flex;align-items:center;gap:.4em;font-size:.9em;padding:.25em .6em;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.price{font-weight:900;letter-spacing:-0.02em;font-size:1.25rem}

.filters{display:grid;gap:var(--s2);padding:var(--s2);border:1px solid var(--line);border-radius:var(--r2);background:var(--bg)}
.filters label{font-weight:700;font-size:.95em}
.filters select,.filters input,.filters textarea{min-height:44px;padding:0 var(--s2);border-radius:var(--r1);border:1px solid var(--line);background:var(--bg);font:inherit}
.filters textarea{min-height:auto;padding:var(--s2)}

table{width:100%;border-collapse:collapse;font-size:.98em}
th,td{text-align:left;padding:var(--s2);border-bottom:1px solid var(--line);vertical-align:top}
thead th{color:var(--ink)}

details.card summary{cursor:pointer;list-style:none}
details.card summary::-webkit-details-marker{display:none}

.site-footer{border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 85%,var(--sand));padding-block:var(--s5)}
.small{color:var(--muted);font-size:.92em}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto !important;transition:none !important;animation:none !important}}
