:root{
  --brand-warm: #f59e0b;    /* warm orange */
  --brand-teal: #14b8a6;    /* teal accent */
  --brand-dark: #0f1724;    /* dark neutral */
  --muted: #6b7280;
  --card-bg: #ffffff;
  --page-bg: #fbfdfd;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--page-bg);
  color: var(--brand-dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.site-header{
  background: linear-gradient(90deg, rgba(20,184,166,0.06), rgba(245,158,11,0.03));
  padding: 22px 18px;
  border-bottom: 1px solid rgba(15,23,36,0.04);
}
.header-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:16px;
}
.header-logo{
  display:flex;
  align-items:center;
  gap:12px;
}
.header-logo img{
  height:56px;
  width:auto;
  display:block;
  object-fit:contain;
  border-radius:6px;
}
.brand-title{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.brand-site{
  font-weight:700;
  color:var(--brand-dark);
  font-size:18px;
  margin:0;
}
.brand-tag{
  font-size:13px;
  color:var(--brand-teal);
  margin:2px 0 0 0;
}

/* Controls + cards use brand accents */
.controls{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0;
}
.search{
  flex:1;
  min-width:220px;
}
input[type=text],
select{
  width:100%;
  padding:10px;
  border-radius:6px;
  border:1px solid #d1d5db;
}
.controls .cta{
  background: linear-gradient(90deg, var(--brand-warm), var(--brand-teal));
  color: #fff;
  padding:10px 14px;
  border-radius:8px;
  border:none;
  font-weight:600;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(20,184,166,0.08);
}

a.btn{
  background: var(--brand-dark);
  color: #fff;
  padding:8px 10px;
  border-radius:6px;
  text-decoration:none;
}
a.link{
  color: var(--brand-teal);
  text-decoration:underline;
}

/* Card accents */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  margin-top:18px;
}
.card{
  background: var(--card-bg);
  border-radius:10px;
  box-shadow: 0 8px 24px rgba(15,23,36,0.04);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.card img{
  width:100%;
  height:160px;
  object-fit:cover;
  background:#eee;
}
.card-body{
  padding:12px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.meta{
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}
.title{
  font-weight:600;
  margin:0 0 8px;
}
.features{
  font-size:13px;
  color:#374151;
  margin-bottom:10px;
}
.price{
  color:var(--brand-warm);
  font-weight:800;
  margin-top:auto;
}
.small{
  font-size:13px;
  color:var(--muted);
}
.actions{
  display:flex;
  gap:8px;
  margin-top:12px;
}

/* responsive container */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:20px;
}
@media (max-width:560px){
  .header-inner{
    padding:6px;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .brand-site{
    font-size:16px;
  }
  .controls{
    flex-direction:column;
  }
  .search,
  .controls > div{
    width:100% !important;
  }
}