:root{
  --accent: #FF7400;
  --ink: #111111;
  --muted: #666666;
  --border: #EDEDED;
  --bg: #FFFFFF;
}

html,body{ background: var(--bg); color: var(--ink); }
a{ color: var(--ink); }
a:hover{ color: var(--accent); text-decoration:none; }

.navbar{ border-bottom: 1px solid var(--border); background:#fff; }
.brand-mark{ height: 34px; width:auto; }

.btn-accent{
  background: var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  font-weight:700;
  letter-spacing:.2px;
}
.btn-accent:hover{ opacity:.92; color:#fff; }

.btn-outline-ink{
  border:1px solid var(--ink);
  color: var(--ink);
  font-weight:700;
}
.btn-outline-ink:hover{ border-color:var(--accent); color:var(--accent); }

.hero{
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #fafafa 100%);
}
.hero h1{ font-weight:900; letter-spacing:-.5px; }
.kicker{ color: var(--muted); font-weight:600; }
.searchbar{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  background:#fff;
}

.card-pro{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease;
  background:#fff;
}
.card-pro:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.card-pro .imgwrap{
  background:#f7f7f7;
  aspect-ratio: 4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.card-pro img{ max-width:100%; max-height:100%; object-fit:contain; }
.badge-soft{
  background: rgba(255,116,0,.10);
  color: var(--accent);
  border: 1px solid rgba(255,116,0,.25);
  font-weight:700;
}
.small-muted{ color: var(--muted); font-size: 13px; }
.filterbox{
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  background:#fff;
}
.footer{
  border-top:1px solid var(--border);
  background:#fff;
  color: var(--muted);
}