/* Styles specific to BookDemo landing form and sections */
:root{
  --bdg: #0b57ff;
  --muted: #6b7280;
}
.hero-section .section-title{ color:#0f1724; font-weight:800; font-size:44px; line-height:1.05; }
.hero-section .lead{ color:#475569; font-size:18px; max-width:680px; }
.hero-cta .btn { border-radius:12px; padding:12px 20px; font-weight:600; }
.hero-cta .btn-primary{ background: linear-gradient(90deg,#0b57ff,#5b7bff); border:0; color:#fff; }
.hero-cta .btn-outline-primary{ background:transparent; border:2px solid rgba(11,87,255,0.12); color:#0b57ff; }

.hero-illustration-card{ background:#fff; border-radius:12px; padding:26px; box-shadow:0 30px 60px rgba(17,24,39,0.06); }
.hero-illustration-card img{ width:100%; display:block; border-radius:8px; }

/* Enhanced hero visuals */
.hero-section{ position:relative; overflow:visible; padding:100px 0; background: linear-gradient(180deg,#fbfdff 0%, #ffffff 60%); }
.hero-section::before{
  content: '';
  position: absolute;
  right: 6%;
  top: 6%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle at 30% 30%, rgba(11,87,255,0.08), rgba(95,125,255,0.02));
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.hero-left{ position:relative; z-index:1; }
.hero-badge{ display:inline-block; background:linear-gradient(90deg,#e8f0ff,#f1f6ff); color:#0b57ff; padding:8px 14px; border-radius:999px; font-weight:700; font-size:13px; margin-bottom:18px; box-shadow:0 6px 18px rgba(11,87,255,0.06); }

.hero-cta{ margin-top:20px; display:flex; gap:12px; align-items:center; }
.hero-cta .btn-primary{ box-shadow: 0 12px 30px rgba(11,87,255,0.14); transition: transform .18s, box-shadow .18s; }
.hero-cta .btn-primary:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px rgba(11,87,255,0.18); }
.hero-cta .btn-primary.pulse{ animation: pulse 2.6s infinite; }
@keyframes pulse{ 0%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-3px) scale(1.02); } 100%{ transform: translateY(0) scale(1); } }

.hero-stats{ display:flex; gap:12px; margin-top:22px; align-items:center; z-index:1; }
.stat-card{ background:#fff; padding:10px 14px; border-radius:10px; box-shadow:0 10px 30px rgba(17,24,39,0.04); display:flex; flex-direction:column; min-width:110px; }
.stat-card strong{ font-size:18px; color:#0b57ff; }
.stat-card span{ font-size:13px; color:#64748b; }

.hero-illustration-card{ position:relative; z-index:1; transition: transform .6s ease, box-shadow .6s ease; }
.hero-illustration-card:hover{ transform: translateY(-6px); box-shadow:0 40px 80px rgba(17,24,39,0.08); }

/* New modern hero graphic styles */
.hero-graphic{ position:relative; width:100%; height:420px; display:flex; align-items:center; justify-content:center; }
.hero-graphic .hero-decor{ position:absolute; right:-10%; top:-6%; width:420px; opacity:0.95; filter:drop-shadow(0 30px 60px rgba(11,87,255,0.06)); }
.hero-graphic .hero-blob{ position:absolute; left:-6%; bottom:-8%; width:320px; opacity:0.95; transform:scale(1); z-index:0; }
.hero-mockups{ position:relative; width:580px; height:220px; display:flex; align-items:center; justify-content:center; }
.mockup-device{ width:100%; border-radius:14px; box-shadow:0 30px 60px rgba(17,24,39,0.08); transform:translateY(6px); }
.mockup-screen{ position:absolute; width:72%; height:auto; right:9%; top:16%; border-radius:8px; box-shadow:0 18px 40px rgba(17,24,39,0.06); transform:rotate(-2deg); border:6px solid rgba(255,255,255,0.6); }
.hero-graphic .mockup-device, .hero-graphic .mockup-screen{ transition: transform .6s ease, box-shadow .4s ease; }
.hero-graphic:hover .mockup-device{ transform:translateY(-8px); }
.hero-graphic:hover .mockup-screen{ transform: translateY(-10px) rotate(-1deg); }

@media (max-width: 991px){
  .hero-graphic{ height:280px; }
  .hero-graphic .hero-decor{ display:none; }
  .hero-mockups{ width:260px; height:180px; }
}

/* phone mockup for small screens */
.hero-phone{ display:inline-block; padding:18px; }
.hero-phone img{ width:160px; max-width:60%; border-radius:18px; box-shadow:0 30px 60px rgba(17,24,39,0.08); }

@media (min-width: 992px){
  .hero-phone{ display:none; }
}


/* Form styles (kept but slightly refined) */
#BookDemoForm .form-control{ border:0; border-bottom:2px solid #e6eef8; border-radius:0; background:transparent; padding:12px 10px; transition: border-color .18s, box-shadow .18s; }
#BookDemoForm .form-control:focus{ outline:none; border-bottom-color:var(--bdg); box-shadow:0 6px 24px rgba(11,87,255,0.06); }
#BookDemoForm label{ font-size:13px; color:var(--muted); }
#BookDemoForm .card{ padding:26px; }
#BookDemoForm .btn-primary{ background: linear-gradient(90deg,#0b57ff,#6a7bff); border:0; padding:12px 20px; border-radius:28px; font-weight:600; }
#BookDemoForm .btn-primary:hover{ transform: translateY(-2px); box-shadow:0 12px 30px rgba(11,87,255,0.12); }

.service-card .service-icon{ width:48px; height:48px; }

/* Responsive tweaks */
@media (max-width: 991px){
  .hero-section .section-title{ font-size:32px; }
}
@media (max-width: 767px){
  .hero-section{ padding:36px 0; }
  #BookDemoForm .card{ padding:18px; }
  .hero-illustration-card{ margin-top:20px; }
}

/* Modern demo form styles */
.demo-card{ background: linear-gradient(180deg,#ffffff,#fbfdff); border-radius:16px; padding:20px; overflow:hidden; }
.demo-card-header{ padding:18px 6px 12px 6px; border-bottom:1px solid rgba(15,23,36,0.04); }
.demo-card-header h3{ margin:0; font-size:22px; font-weight:800; color:#0f1724; }
.demo-card-header p{ margin:0; color:#6b7280; }
.demo-badge{ background:linear-gradient(90deg,#eef2ff,#f8faff); color:#0b57ff; padding:8px 12px; border-radius:999px; font-weight:700; font-size:13px; box-shadow:0 8px 24px rgba(11,87,255,0.04); }

.demo-form-grid{ padding:18px; }
.input-icon{ position:relative; }
.input-icon input.form-control, .input-icon select.form-control, .input-icon textarea.form-control{ padding-left:14px; padding-right:14px; border-radius:10px; background:#ffffff; border:1px solid #e6eef8; box-shadow: 0 6px 18px rgba(17,24,39,0.03); color:#0f1724; }
.input-icon input.form-control:focus, .input-icon select.form-control:focus, .input-icon textarea.form-control:focus{ border-color:var(--bdg); box-shadow:0 10px 30px rgba(11,87,255,0.06); }

/* show white text on select when focused (selected state) */
.input-icon select.form-control:focus{ background: linear-gradient(90deg,#0b57ff,#6a7bff); color:#ffffff; }
.input-icon select.form-control:focus option{ color:#111; }
.input-icon::before{ content: ''; position:absolute; left:10px; top:50%; transform:translateY(-50%); width:0; height:0; pointer-events:none; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chip{ display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:#f6f8ff; color:#0b57ff; cursor:pointer; user-select:none; transition: all .16s; border:1px solid rgba(11,87,255,0.06); }
.chip input{ display:none; }
.chip:hover{ transform: translateY(-3px); box-shadow:0 12px 30px rgba(11,87,255,0.06); }
.chip.active{ background: linear-gradient(90deg,#0b57ff,#6a7bff); color:#fff !important; border-color:transparent; box-shadow:0 12px 30px rgba(11,87,255,0.08); }

/* small screens adjustments */
@media (max-width: 575px){
  .demo-card{ padding:14px; }
  .demo-card-header{ display:block; text-align:left; }
  .demo-badge{ margin-top:10px; }
}