/* Modern responsive CSS for VeloxDrive demo */
:root{
  --bg:#ffffff;--muted:#6b7280;--accent:#0ea5a4;--brand:#2b6df6;--max:1100px;
  --radius:10px; --container-padding:20px;
}
*{box-sizing:border-box}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:#0f172a; background:var(--bg); -webkit-font-smoothing:antialiased}
.container{max-width:var(--max); margin:0 auto; padding:var(--container-padding)}
.site-header{background:#fff; border-bottom:1px solid #eef2f6; position:sticky; top:0; z-index:30}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.logo{font-weight:700; color:var(--brand); text-decoration:none; font-size:1.2rem}
.nav{display:flex; gap:14px; align-items:center}
.nav a{color:var(--muted); text-decoration:none; padding:6px 8px}
.btn{display:inline-block; padding:10px 14px; border-radius:8px; background:transparent; border:1px solid #e6eefc; text-decoration:none; color:var(--brand); cursor:pointer}
.btn.primary{background:var(--brand); color:white; border:0}
.nav-toggle{display:none; background:transparent; border:0; font-size:1.1rem}

/* hero */
.hero{padding:48px 0}
.hero-inner{display:grid; grid-template-columns:1fr 420px; gap:28px; align-items:center}
.hero-copy h1{font-size:clamp(1.6rem,2.8vw,2.6rem); margin:0 0 12px}
.hero-copy p{color:var(--muted); margin:0 0 18px}
.hero-svg{width:100%; height:auto; border-radius:12px}

/* sections */
.section{padding:36px 0}
.cards{display:flex; gap:18px; flex-wrap:wrap}
.card{flex:1; min-width:220px; padding:18px; border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(13,38,76,0.04)}
.pricing-grid{display:flex; gap:18px; flex-wrap:wrap}
.price-card{flex:1; padding:18px; border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(13,38,76,0.04)}
.price-card.featured{border:2px solid var(--accent)}

/* team */
.team-grid{display:flex; gap:18px; flex-wrap:wrap}
.team-member{background:#fff; padding:12px; border-radius:12px; text-align:center; width:200px}

/* contact form */
.form{background:#fff; padding:18px; border-radius:12px; box-shadow:0 6px 18px rgba(13,38,76,0.04)}
.form-row{display:flex; gap:12px; margin-bottom:12px}
.form-row label{flex:1}
input, textarea, select{width:100%; padding:10px; border:1px solid #e6eefc; border-radius:8px}
.form-actions{display:flex; gap:10px; margin-top:10px}
.form-note{font-size:0.9rem; color:var(--muted); margin-top:10px}

/* footer */
.site-footer{border-top:1px solid #eef2f6; padding:18px 0; margin-top:30px}
.footer-inner{display:flex; justify-content:space-between; gap:20px; align-items:center}

/* map */
.map{height:320px; background:#f8fafc; display:flex; align-items:center; justify-content:center; border-radius:12px; padding:18px; margin-bottom:12px}
.map-svg{width:100%; height:100%}

/* responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr; text-align:center}
  .hero-media{order:-1}
  .nav{display:none}
  .nav-toggle{display:block}
  .form-row{flex-direction:column}
  .pricing-grid{flex-direction:column}
}

/* Dark mode */
:root[data-theme='dark'] {
  --bg:#0f172a;
  --muted:#94a3b8;
  --accent:#2dd4bf;
  --brand:#60a5fa;
  color-scheme: dark;
}
:root[data-theme='dark'] body { background-color: var(--bg); color: #f1f5f9; }
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .price-card,
:root[data-theme='dark'] .team-member,
:root[data-theme='dark'] .form { background-color: #1e293b; color: #f1f5f9; }
:root[data-theme='dark'] input,
:root[data-theme='dark'] textarea,
:root[data-theme='dark'] select { background-color:#334155; color:#f1f5f9; border-color:#475569; }
:root[data-theme='dark'] .site-header,
:root[data-theme='dark'] .site-footer { background-color: #1e293b; border-color: #334155; }

/* Toast notifications */
#toastContainer {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}
.toast {
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  font-weight: 500;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateX(100%);
  animation: slideIn 0.4s forwards, fadeOut 0.4s ease forwards 4s;
}
.toast.success { background-color: #16a34a; }
.toast.error { background-color: #dc2626; }
.toast.info { background-color: #2563eb; }

@keyframes slideIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOut {
  to { opacity: 0; transform: translateX(100%); }
}