:root{
  --bg:#0b0b0d;
  --card:#0f0f12;
  --accent:#e03b3b;
  --muted:#9aa0a6;
  --text:#e9eef2;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#050508 0%, var(--bg) 100%);color:var(--text);min-height:100vh}
header{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:transparent;border-bottom:1px solid rgba(255,255,255,0.03)}
.brand{display:flex;gap:12px;align-items:center}
.logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
nav a{color:var(--muted);text-decoration:none;margin-left:18px}
nav a.active{color:var(--text);font-weight:600}
.wrap{max-width:1100px;margin:28px auto;padding:0 18px}
.hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:14px;padding:28px}
.hero h1{margin:0 0 8px;font-size:34px}
.hero p{margin:0 0 18px;color:var(--muted)}
.cta-grid{display:flex;gap:12px}
.big-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:14px 18px;border-radius:10px;cursor:pointer;color:var(--text);display:flex;align-items:center;gap:12px;text-decoration:none}
.big-btn:hover{transform:translateY(-3px)}
.icon{width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center}
.side{background:var(--card);padding:18px;border-radius:12px}
.side h3{margin:0 0 12px}
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
.post{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:12px;border-radius:10px}
.post h4{margin:6px 0}
.meta{color:var(--muted);font-size:13px}
.categories{display:flex;gap:12px;flex-wrap:wrap}
.cat{background:rgba(255,255,255,0.03);padding:12px 18px;border-radius:10px;text-decoration:none;color:var(--text)}
.article{background:var(--card);padding:18px;border-radius:12px;margin-bottom:14px}
form{display:grid;gap:12px}
input,textarea,select{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:10px;border-radius:8px;color:var(--text)}
button.primary{background:linear-gradient(90deg,var(--accent),#ff6b6b);border:none;padding:12px;border-radius:10px;color:white;cursor:pointer}
footer{margin-top:40px;padding:18px;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted);text-align:center}
@media(max-width:900px){.hero{grid-template-columns:1fr;}.posts{grid-template-columns:1fr}nav a{margin-left:12px}}
/* ---- Bike list styles ---- */
.bike-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.bike-card {
  background: var(--card);
  padding: 12px;
  border-radius: 10px;
  text-align: center;
}

.bike-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
}

.bike-card button {
  margin: 4px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(90deg,var(--accent),#ff6b6b);
  color: white;
  cursor: pointer;
}

.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 20px;
  z-index: 1000;
}

.bike-detail {
  background: var(--card);
  padding: 20px;
  border-radius: 12px;
  color: white;
  max-width: 400px;
  width: 100%;
  text-align: left;
}