/* ============================================================
   yfxerp.com · 预约演示页专属样式
   ============================================================ */
.demo-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#E8F2FE 0%,#f4faf8 55%,#E4F7EF 100%);
  padding:110px 0 80px;text-align:center;
}
.demo-hero::before{
  content:"";position:absolute;left:-70px;top:-60px;width:320px;height:320px;
  background:radial-gradient(circle,rgba(47,124,246,.16),transparent 65%);border-radius:50%;
}
.demo-hero::after{
  content:"";position:absolute;right:-80px;bottom:-140px;width:400px;height:400px;
  background:radial-gradient(circle,rgba(46,191,139,.15),transparent 65%);border-radius:50%;
}
.demo-hero .container{position:relative;z-index:2}
.demo-hero h1{font-size:clamp(30px,4.2vw,46px);color:#152A3F;margin:14px 0 14px}
.demo-hero h1 em{font-style:normal;background:linear-gradient(90deg,#2F7CF6,#2EBF8B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.demo-hero p{max-width:680px;margin:0 auto;color:#5a6d85;font-size:16px;line-height:1.9}
.demo-hero-badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.demo-hero-badges span{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.85);border:1px solid rgba(47,124,246,.14);border-radius:999px;padding:9px 18px;font-size:13.5px;color:#2a4a6e;font-weight:500}
.demo-hero-badges svg{color:#2EBF8B}

.demo-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.demo-layout .contact-form-card{background:#fff;border:1px solid #eaf1fa;border-radius:22px;padding:40px 36px;box-shadow:0 18px 50px rgba(21,42,63,.06)}
.demo-layout .contact-form-card h3{font-size:22px;color:#152A3F;margin-bottom:6px}
.demo-layout .contact-form-card .form-tip{margin-bottom:24px}
.demo-layout .contact-form-card label{font-size:13px;color:#5a6d85;margin-bottom:7px;display:block}
.demo-layout .contact-form-card .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.demo-layout .contact-form-card .form-row>div{margin-bottom:4px}
.demo-layout input,.demo-layout select,.demo-layout textarea{
  width:100%;padding:13px 16px;border:1px solid #dbe7f5;border-radius:10px;font-size:14px;color:#152A3F;
  outline:none;transition:.3s;background:#fbfdff;margin-bottom:16px;
}
.demo-layout input:focus,.demo-layout select:focus,.demo-layout textarea:focus{border-color:#2F7CF6;box-shadow:0 0 0 3px rgba(47,124,246,.1);background:#fff}
.demo-layout textarea{resize:vertical}
.demo-agree{display:flex;align-items:flex-start;gap:10px;margin:6px 0 22px}
.demo-agree input{width:auto;margin:3px 0 0;accent-color:#2F7CF6;flex:none}
.demo-agree label{font-size:12.5px;color:#8b9bb0;line-height:1.7;margin:0}
.demo-submit{width:100%;text-align:center;justify-content:center}

.demo-info{display:flex;flex-direction:column;gap:18px}
.demo-info-img{border-radius:20px;overflow:hidden;box-shadow:0 18px 46px rgba(21,42,63,.1)}
.demo-info-img img{width:100%;height:300px;object-fit:cover;display:block}
.demo-info-box{background:#fff;border:1px solid #eaf1fa;border-radius:16px;padding:22px 24px}
.demo-info-box h4{display:flex;align-items:center;gap:10px;font-size:15px;color:#152A3F;margin-bottom:8px}
.demo-info-box h4 svg{color:#2F7CF6}
.demo-info-box p{font-size:14px;color:#5a6d85;line-height:1.8;margin:0}

@media (max-width:960px){
  .demo-layout{grid-template-columns:1fr}
  .demo-layout .contact-form-card{padding:30px 22px}
}
@media (max-width:640px){
  .demo-layout .contact-form-card .form-row{grid-template-columns:1fr}
}