body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #fafbfc;
  color: #153243;
  margin: 0;
  -webkit-font-smoothing:antialiased;
}
h1 { color: #0b2545; font-family:'Playfair Display', serif; }

/* Layout helpers */
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.site-header { background: #fff; border-bottom: 1px solid #e6e6e6; position: sticky; top: 0; z-index: 20; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.logo { font-weight:700; color:#007acc; margin:0; }
.main-nav a { margin-left:18px; color:#333; text-decoration:none; }

/* Hero slider */
.hero { background: linear-gradient(90deg,#ffffff,#f7fbff); padding:40px 0; }
.slider { position:relative; height:160px; overflow:hidden; border-radius:8px; border:1px solid #e3e8ef; background:#fff; }
.slide { position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:24px; opacity:0; transform:translateX(20px); transition:all .6s ease; }
.slide.active { opacity:1; transform:none; }
.slide h2 { margin:0 0 8px 0; color:#023e8a; }

/* Cards */
.cards { display:flex; gap:18px; margin:28px 0; }
.card { background:#fff; padding:18px; border-radius:8px; box-shadow:0 2px 6px rgba(20,30,50,0.05); flex:1; }

.gallery { display:flex; gap:8px; margin-top:12px; }
.gallery img{ width:120px; height:72px; object-fit:cover; border-radius:6px; }

/* Map section */
.map-section { display:flex; gap:20px; align-items:flex-start; }
.map-column { flex:2; }
.map { height:360px; border-radius:8px; border:1px solid #ddd; }
.panel { flex:1; background:#fff; padding:16px; border-radius:8px; box-shadow:0 2px 6px rgba(20,30,50,0.05); }
.btn { display:inline-block; margin-top:12px; padding:10px 14px; background:#007acc; color:#fff; border-radius:6px; border:none; cursor:pointer; }

.btn.outline{ background:transparent; color:#0b2545; border:1px solid #cbd6e6; }

.connect-section{ margin-top:26px; display:flex; gap:18px; align-items:flex-start; }
.connect-panel{ background:#fff; padding:16px; border-radius:8px; box-shadow:0 2px 10px rgba(20,30,50,0.06); flex:1 }
.connect-row{ display:flex; gap:12px; align-items:center }
.device-status{ color:#666 }
.device-name{ margin-top:10px; font-weight:600 }
.can-table{ width:100%; margin-top:12px; border-collapse:collapse }
.can-table td{ padding:8px 6px; border-top:1px solid #f0f2f5 }
.instructions{ flex:1; background:transparent }
.instructions ol{ padding-left:18px }
.tip{ color:#556; font-size:0.95rem }

/* Scores */
.scores { margin:24px 0 80px; }
.score-cards { display:flex; gap:12px; }
.score-card { background:#fff; padding:16px; border-radius:8px; flex:1; text-align:center; }
.score-card h4 { margin:0 0 8px 0; }
.note { color:#666; font-size:0.95rem; }

.site-footer { padding:18px 0; text-align:center; color:#666; }

/* Responsive */
@media (max-width:900px){
  .cards{flex-direction:column}
  .map-section{flex-direction:column}
}