:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#ffcc00;
  --accent-2:#7bd389;
  --glass: rgba(255,255,255,0.04);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg), #071123 60%);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:980px;margin:0 auto;padding:24px}

/* Skip link */
.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus{
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
  z-index: 60;
  color: #fff;
  text-decoration: none;
}

/* Header */
.site-header{position:relative;padding:60px 0;overflow:hidden}
.site-header h1{font-size:40px;margin:0 0 6px}
.subtitle{color:var(--muted);margin:0 0 16px}
.hero-actions{display:flex;gap:12px}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.08);color:inherit;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),#ff9f1c);color:#08111a;border:none}
.btn.ghost{background:transparent}

/* Illustration */
.hero-illustration{position:absolute;right:40px;top:10px;width:420px;height:220px;pointer-events:none;color:rgba(255,255,255,0.16)}
.atom{width:100%;height:100%}
.atom .orbit{
  transform-origin: 100px 60px;
  transform-box: fill-box;
  transition: transform 0.3s ease;
}
.atom .orbit.spin{
  animation: spin 1.6s linear;
}
@keyframes spin{
  from{ transform: rotate(0deg) }
  to{ transform: rotate(360deg) }
}
.bike-emoji{position:absolute;right:22px;bottom:8px;font-size:48px}

/* Content cards */
.about{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:12px;padding:20px;margin-top:18px}
.container-card{background:var(--card);border-radius:12px;padding:16px;margin-top:14px;border:1px solid rgba(255,255,255,0.03)}

/* Facts, timeline, gallery */
.facts{list-style:none;padding:0;margin:12px 0 0;display:flex;gap:18px}
.timeline ol{padding-left:20px}
.gallery .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:8px}

/* Message form */
.message form{display:flex;flex-direction:column;gap:8px}
input,textarea{background:var(--card);border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:8px;color:inherit}
.form-actions{display:flex;justify-content:flex-end}
.site-footer{padding:20px 0;text-align:center;color:var(--muted)}
.status{color:var(--accent-2);margin-top:6px}

/* Messages list */
.messages-list h3{margin:0 0 8px}
.messages-list ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.messages-list .muted{color:var(--muted)}
.msg-item{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.02)}
.msg-item strong{display:block}
.msg-item .time{font-size:12px;color:var(--muted);margin-left:6px}

/* Confetti root layering */
.confetti-root{position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:30}

/* Responsive */
@media (max-width:800px){
  .hero-illustration{display:none}
  .site-header{padding:36px 18px}
  .container{padding:18px}
}