/* VipexAI Receptionist — matches main site */
body { background:#000; color:white; font-family:Arial,Helvetica,sans-serif; margin:0; }

header { display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid #222; flex-wrap:wrap; }
header h2 { margin:0; font-size:22px; }
header h2 span { color:#39ff14; }
nav a { color:white; margin-left:20px; text-decoration:none; font-size:14px; }
nav a:hover { color:#39ff14; }

.hero { padding:100px 20px; text-align:center; background-image:url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1600&q=80"); background-size:cover; background-position:center; }
.hero h1 { font-size:48px; margin-bottom:20px; }
.hero p { font-size:18px; max-width:700px; margin:auto; color:#ddd; }

button, .btn { background:#39ff14; border:none; padding:14px 24px; border-radius:6px; font-weight:bold; cursor:pointer; margin-top:20px; font-size:15px; color:#000; display:inline-block; text-decoration:none; }
button:hover, .btn:hover { background:#2be600; }

.section { padding:80px 20px; text-align:center; max-width:1100px; margin:auto; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:30px; margin-top:40px; }
.card { background:#111; padding:30px; border-radius:10px; }
.card img { width:100%; border-radius:8px; margin-bottom:15px; }

/* Onboarding wizard */
.wizard-wrap { max-width:720px; margin:50px auto 80px; padding:0 20px; }
.wizard-wrap h1 { font-size:30px; margin-bottom:6px; }
.wizard-wrap > p { color:#888; margin-bottom:36px; }

.step { display:none; }
.step.active { display:block; }

.step-header { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.step-num { width:40px; height:40px; border-radius:50%; background:#39ff14; color:#000; font-weight:bold; font-size:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.step-title { font-size:20px; font-weight:bold; }
.step-sub { color:#888; font-size:14px; }

.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; color:#aaa; margin-bottom:6px; }
input[type=text], input[type=email], input[type=tel], input[type=time], select, textarea {
  width:100%; padding:12px; border-radius:6px; border:1px solid #333; background:#111; color:white; font-size:14px; box-sizing:border-box;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:#39ff14; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.toggle-group { display:flex; flex-direction:column; gap:12px; }
.toggle-item { display:flex; align-items:flex-start; gap:14px; background:#111; border-radius:8px; padding:16px; border:1px solid #1a1a1a; cursor:pointer; }
.toggle-item:hover { border-color:#333; }
.toggle-item input[type=checkbox] { margin-top:2px; width:18px; height:18px; accent-color:#39ff14; cursor:pointer; flex-shrink:0; }
.toggle-label strong { display:block; font-size:15px; margin-bottom:3px; }
.toggle-label span { font-size:13px; color:#888; }

.cal-box { background:#111; border:1px solid #333; border-radius:10px; padding:24px; margin-bottom:20px; text-align:center; }
.cal-box h4 { margin:0 0 8px; font-size:16px; }
.cal-box p { color:#888; font-size:13px; margin:0 0 16px; }
.cal-connect-btn { background:#4285f4; color:white; border:none; padding:12px 28px; border-radius:6px; font-size:14px; font-weight:bold; cursor:pointer; text-decoration:none; display:inline-block; }
.cal-connect-btn:hover { background:#3367d6; }
.cal-connected { color:#39ff14; font-weight:bold; font-size:14px; }

.webhook-box { background:#0a0a0a; border:1px solid #222; border-radius:8px; padding:16px; margin-bottom:16px; }
.webhook-box label { font-size:12px; color:#888; margin-bottom:6px; display:block; }
.webhook-url { font-family:monospace; font-size:12px; color:#39ff14; word-break:break-all; background:#000; padding:10px 12px; border-radius:4px; border:1px solid #1a1a1a; display:block; margin-bottom:8px; }
.copy-btn { background:#1a1a1a; border:1px solid #333; color:#ccc; padding:6px 14px; border-radius:4px; cursor:pointer; font-size:12px; }
.copy-btn:hover { border-color:#39ff14; color:#39ff14; }

.support-box { background:#111; border:1px solid #1a1a1a; border-radius:10px; padding:24px; margin-top:30px; }
.support-box h4 { color:#39ff14; margin:0 0 12px; }
.support-box p { color:#ccc; margin:6px 0; font-size:14px; }
.support-box a { color:#39ff14; }

.progress-bar { display:flex; gap:8px; margin-bottom:36px; }
.progress-step { flex:1; height:4px; background:#1a1a1a; border-radius:2px; }
.progress-step.done { background:#39ff14; }
.progress-step.active { background:#39ff14; opacity:0.5; }

.nav-btns { display:flex; justify-content:space-between; margin-top:28px; }
.btn-back { background:#111; border:1px solid #333; color:#ccc; padding:12px 24px; border-radius:6px; cursor:pointer; font-size:14px; }
.btn-back:hover { border-color:#39ff14; }
.btn-next { background:#39ff14; border:none; color:#000; padding:12px 28px; border-radius:6px; cursor:pointer; font-size:15px; font-weight:bold; }
.btn-next:hover { background:#2be600; }

.success-icon { font-size:64px; text-align:center; color:#39ff14; margin-bottom:16px; }
.success-icon svg { width:72px; height:72px; }

.alert { padding:12px 18px; border-radius:6px; font-size:13px; margin-bottom:16px; }
.alert-success { background:#14532d; border:1px solid #39ff14; color:#86efac; }
.alert-error { background:#450a0a; border:1px solid #ef4444; color:#fca5a5; }
.hidden { display:none; }

footer { background:#111; padding:40px; text-align:center; margin-top:80px; }
footer p { color:#666; font-size:13px; margin:0 0 10px; }
footer a { color:#39ff14; margin:0 10px; text-decoration:none; }

@media(max-width:600px) {
  .hero h1 { font-size:30px; }
  .form-row { grid-template-columns:1fr; }
  nav { margin-top:10px; }
}