/* CRM KIA pages - shared styles (scoped with .ems- prefix) */
/* Enquiry Management System page - scoped styles (prefix: ems-) */
.ems-page { font-family: 'Poppins', sans-serif; color: #1f2a44; --ems-brand:#f05423; --ems-navy:#1b2559; --ems-soft:#fff4ef; --ems-line:#e8ebf3; }
.ems-page h1, .ems-page h2, .ems-page h3, .ems-page h4, .ems-page h5 { font-family: 'Poppins', sans-serif; color: var(--ems-navy); }
.ems-section { padding: 80px 0; }
.ems-section.alt { background: #f7f8fc; }
.ems-eyebrow { display:inline-block; font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--ems-brand); background:var(--ems-soft); padding:6px 14px; border-radius:30px; margin-bottom:16px; }
.ems-heading { font-size:34px; font-weight:700; line-height:1.3; margin:0 0 14px; }
.ems-sub { font-size:16px; line-height:1.8; color:#5b6580; max-width:720px; margin:0 auto 46px; }
.ems-center { text-align:center; }

/* Hero */
.ems-hero { position:relative; padding:150px 0 90px; background:linear-gradient(135deg,#fff4ef 0%,#ffffff 45%,#eef1ff 100%); overflow:hidden; }
.ems-hero:before { content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(240,84,35,.18),transparent 70%); }
.ems-hero:after { content:""; position:absolute; left:-140px; bottom:-160px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(27,37,89,.12),transparent 70%); }
.ems-hero .container { position:relative; z-index:2; }
.ems-hero h1 { font-size:46px; font-weight:700; line-height:1.2; margin:0 0 20px; }
.ems-hero h1 span { color:var(--ems-brand); }
.ems-hero p { font-size:17px; line-height:1.8; color:#5b6580; margin-bottom:30px; }
.ems-btn { display:inline-block; padding:14px 30px; border-radius:8px; font-weight:600; font-size:14px; transition:all .25s; margin:0 10px 10px 0; }
.ems-btn.primary { background:var(--ems-brand); color:#fff; box-shadow:0 10px 24px rgba(240,84,35,.3); }
.ems-btn.primary:hover { background:#d8431a; color:#fff; transform:translateY(-2px); }
.ems-btn.ghost { border:2px solid var(--ems-navy); color:var(--ems-navy); }
.ems-btn.ghost:hover { background:var(--ems-navy); color:#fff; }

/* CRM app window mock (hero) */
.ems-app { background:#fff; border-radius:14px; box-shadow:0 30px 70px rgba(27,37,89,.22); border:1px solid var(--ems-line); overflow:hidden; font-size:12px; }
.ems-app-bar { background:#f1f3fa; padding:9px 14px; display:flex; align-items:center; border-bottom:1px solid var(--ems-line); }
.ems-app-bar i { width:9px; height:9px; border-radius:50%; margin-right:5px; display:inline-block; }
.ems-app-bar .url { margin:0 auto; background:#fff; border-radius:20px; padding:3px 18px; font-size:11px; color:#8a93ab; }
.ems-app-body { display:flex; min-height:360px; }
.ems-side { width:46px; background:var(--ems-navy); padding:12px 0; text-align:center; }
.ems-side span { display:block; width:30px; height:30px; line-height:30px; margin:0 auto 8px; border-radius:8px; color:#9aa5d6; font-size:14px; }
.ems-side span.on { background:var(--ems-brand); color:#fff; }
.ems-main { flex:1; padding:14px; background:#f7f8fc; min-width:0; }
.ems-main-head { display:flex; align-items:center; margin-bottom:12px; }
.ems-main-head b { font-size:14px; color:var(--ems-navy); }
.ems-main-head .add { margin-left:auto; background:var(--ems-brand); color:#fff; font-size:11px; padding:5px 12px; border-radius:6px; font-weight:600; }
.ems-kpis { display:flex; margin:0 -4px 12px; }
.ems-kpi { flex:1; margin:0 4px; background:#fff; border:1px solid var(--ems-line); border-radius:8px; padding:9px 10px; }
.ems-kpi small { display:block; color:#8a93ab; font-size:10px; }
.ems-kpi b { font-size:17px; color:var(--ems-navy); }
.ems-kpi em { font-style:normal; font-size:10px; color:#188a4f; margin-left:4px; }
.ems-funnel { background:#fff; border:1px solid var(--ems-line); border-radius:8px; padding:10px 12px; margin-bottom:12px; }
.ems-funnel small { color:#8a93ab; font-size:10px; display:block; margin-bottom:6px; }
.ems-bar { height:9px; border-radius:6px; margin-bottom:5px; }
.ems-list { background:#fff; border:1px solid var(--ems-line); border-radius:8px; }
.ems-list .r { display:flex; align-items:center; padding:8px 10px; border-bottom:1px solid var(--ems-line); }
.ems-list .r:last-child { border-bottom:0; }
.ems-list .av { width:24px; height:24px; border-radius:50%; background:var(--ems-soft); color:var(--ems-brand); font-weight:700; text-align:center; line-height:24px; margin-right:9px; font-size:11px; flex:none; }
.ems-list .r small { color:#8a93ab; font-size:10px; margin-left:6px; }
.ems-tag { margin-left:auto; font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.ems-tag.t1 { background:#e8ebff; color:#3b4bb8; } .ems-tag.t2 { background:#e3f7ec; color:#188a4f; } .ems-tag.t3 { background:#fff0d9; color:#b66d00; } .ems-tag.t4 { background:#ffe5e5; color:#c23030; }
.ems-float { position:absolute; background:#fff; border-radius:12px; padding:10px 14px; box-shadow:0 14px 30px rgba(27,37,89,.2); font-size:12px; font-weight:600; color:var(--ems-navy); z-index:3; }
.ems-float span { color:var(--ems-brand); }

/* Kanban board */
.ems-board { display:flex; flex-wrap:wrap; align-items:stretch; padding:6px 0; margin:0 -6px; }
.ems-col { flex:1 1 150px; min-width:0; margin:6px; background:#eef0f8; border-radius:12px; padding:12px; }
.ems-col-h { display:flex; align-items:center; font-size:13px; font-weight:600; color:var(--ems-navy); margin-bottom:12px; }
.ems-col-h i { width:9px; height:9px; border-radius:50%; margin-right:8px; }
.ems-col-h span { margin-left:auto; background:#fff; border-radius:10px; padding:1px 8px; font-size:11px; color:#5b6580; }
.ems-lead { background:#fff; border-radius:9px; padding:11px 12px; margin-bottom:9px; box-shadow:0 3px 8px rgba(27,37,89,.06); font-size:12px; color:#44506b; }
.ems-lead b { display:block; color:var(--ems-navy); font-size:12.5px; margin-bottom:2px; }
.ems-lead small { display:block; color:#8a93ab; font-size:11px; }
.ems-lead .src { display:inline-block; margin-top:6px; font-size:10px; background:var(--ems-soft); color:var(--ems-brand); padding:2px 8px; border-radius:10px; font-weight:600; }

/* Stats strip */
.ems-stats { position:relative; z-index:11; background:#fff; padding:40px 0 0; }
.ems-stats .box { background:#fff; border-radius:16px; box-shadow:0 20px 50px rgba(27,37,89,.12); padding:30px 20px; }
.ems-stat { text-align:center; padding:6px 10px; }
.ems-stat b { display:block; font-size:30px; color:var(--ems-brand); font-weight:700; }
.ems-stat span { font-size:13px; color:#5b6580; }

/* Compare table */
.ems-table-wrap { border-radius:14px; overflow:hidden; box-shadow:0 14px 40px rgba(27,37,89,.08); border:1px solid var(--ems-line); background:#fff; }
.ems-table { width:100%; border-collapse:collapse; margin:0; }
.ems-table th { background:var(--ems-navy); color:#fff; font-size:14px; font-weight:600; padding:16px 22px; text-align:left; }
.ems-table td { padding:15px 22px; font-size:14px; border-top:1px solid var(--ems-line); color:#44506b; vertical-align:top; }
.ems-table tr:nth-child(even) td { background:#fafbfe; }
.ems-table td:first-child { font-weight:600; color:var(--ems-navy); width:38%; }
.ems-table td .bad { color:#c23030; margin-right:6px; } .ems-table td .good { color:#188a4f; margin-right:6px; }
.ems-table.fields td:first-child { width:30%; }

/* Pipeline stages */
.ems-stages { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; }
.ems-stage { position:relative; flex:1 1 150px; max-width:190px; margin:8px; padding:20px 12px; text-align:center; background:#fff; border:1px solid var(--ems-line); border-radius:14px; box-shadow:0 10px 26px rgba(27,37,89,.07); transition:all .25s; }
.ems-stage:hover { transform:translateY(-6px); box-shadow:0 18px 36px rgba(27,37,89,.14); }
.ems-stage .n { width:38px; height:38px; line-height:38px; border-radius:50%; margin:0 auto 10px; color:#fff; font-weight:700; font-size:14px; }
.ems-stage h5 { font-size:14px; font-weight:600; margin:0; }
.ems-stage:not(:last-child):after { content:"\2192"; position:absolute; right:-20px; top:50%; transform:translateY(-50%); color:#b7bdd1; font-size:18px; }

/* Process flow */
.ems-flow { display:flex; flex-wrap:wrap; margin:0 -10px; }
.ems-flow-item { width:20%; padding:10px; }
.ems-flow-card { height:100%; background:#fff; border:1px solid var(--ems-line); border-radius:16px; padding:26px 16px 22px; text-align:center; position:relative; box-shadow:0 10px 26px rgba(27,37,89,.06); transition:all .25s; }
.ems-flow-card:hover { transform:translateY(-6px); border-color:var(--ems-brand); box-shadow:0 18px 36px rgba(240,84,35,.15); }
.ems-flow-card .no { position:absolute; top:-15px; left:50%; margin-left:-15px; width:30px; height:30px; line-height:30px; border-radius:50%; background:var(--ems-brand); color:#fff; font-weight:700; font-size:13px; box-shadow:0 6px 14px rgba(240,84,35,.4); }
.ems-flow-card .ic { width:54px; height:54px; margin:6px auto 12px; border-radius:14px; background:var(--ems-soft); color:var(--ems-brand); font-size:24px; line-height:54px; }
.ems-flow-card h5 { font-size:14px; font-weight:600; margin:0 0 6px; }
.ems-flow-card p { font-size:12.5px; color:#5b6580; margin:0; line-height:1.6; }

/* Enquiry record panel */
.ems-record { background:#fff; border:1px solid var(--ems-line); border-radius:16px; box-shadow:0 20px 50px rgba(27,37,89,.1); overflow:hidden; }
.ems-record-head { display:flex; align-items:center; padding:14px 22px; background:linear-gradient(90deg,var(--ems-navy),#2b3a86); color:#fff; }
.ems-record-head .dot { width:10px; height:10px; border-radius:50%; margin-right:6px; }
.ems-record-head b { margin-left:12px; font-size:14px; font-weight:600; color:#fff; }
.ems-record-head .id { margin-left:auto; font-size:12px; background:rgba(255,255,255,.15); padding:3px 12px; border-radius:20px; }
.ems-record-grid { display:flex; flex-wrap:wrap; }
.ems-field { width:50%; display:flex; align-items:flex-start; padding:20px 24px; border-bottom:1px solid var(--ems-line); transition:background .25s; }
.ems-field:nth-child(odd) { border-right:1px solid var(--ems-line); }
.ems-field:nth-last-child(-n+2) { border-bottom:0; }
.ems-field:hover { background:#fff8f5; }
.ems-field .fi { flex:none; width:46px; height:46px; line-height:46px; text-align:center; font-size:20px; border-radius:12px; background:var(--ems-soft); margin-right:16px; transition:all .25s; }
.ems-field:hover .fi { transform:scale(1.08) rotate(-4deg); box-shadow:0 8px 18px rgba(240,84,35,.25); }
.ems-field h5 { font-size:15px; font-weight:600; margin:0 0 4px; }
.ems-field p { font-size:13.5px; color:#5b6580; margin:0; line-height:1.6; }
.ems-field p.chips span { display:inline-block; font-size:11px; font-weight:600; padding:2px 10px; border-radius:20px; margin:2px 0; }
.ems-field p.chips i { font-style:normal; color:#9aa3bd; margin:0 5px; }
.ems-field .c1 { background:#e8ebff; color:#3b4bb8; } .ems-field .c2 { background:#e3eaff; color:#2f5fd0; } .ems-field .c3 { background:#e3f7ec; color:#188a4f; } .ems-field .c4 { background:#ffe5e5; color:#c23030; }
@media (max-width: 767px) {
  .ems-field { width:100%; padding:16px 18px; border-right:0 !important; border-bottom:1px solid var(--ems-line) !important; }
  .ems-field:last-child { border-bottom:0 !important; }
}

/* JS circular flow diagram */
.ems-circle-wrap { width:100%; max-width:760px; margin:0 auto; position:relative; }
.ems-stage-box { position:relative; width:760px; height:760px; transform-origin:top left; }
.ems-stage-box svg { position:absolute; left:0; top:0; width:760px; height:760px; pointer-events:none; }
.ems-node { position:absolute; width:128px; height:128px; margin:-64px 0 0 -64px; border-radius:50%; background:#fff; border:5px solid #ccc; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px; cursor:pointer; transition:transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease, opacity .35s ease; box-shadow:0 8px 20px rgba(27,37,89,.1); animation:emsPop .6s cubic-bezier(.22,.8,.3,1) backwards; will-change:transform; }
.ems-stage-box.has-active .ems-node:not(.on) { opacity:.5; }
.ems-center-in { transition:opacity .22s ease, transform .22s ease; display:flex; flex-direction:column; align-items:center; }
.ems-center-in.swap { opacity:0; transform:scale(.96); }
.ems-node .ico { font-size:28px; line-height:1; margin-bottom:5px; }
.ems-node .lbl { font-size:11.5px; font-weight:600; line-height:1.25; color:var(--ems-navy); }
.ems-node .no { position:absolute; top:-6px; left:-6px; width:28px; height:28px; line-height:28px; border-radius:50%; color:#fff; font-weight:700; font-size:13px; box-shadow:0 4px 10px rgba(0,0,0,.2); }
.ems-node.on { transform:scale(1.12); box-shadow:0 16px 34px rgba(27,37,89,.25); z-index:5; }
@keyframes emsPop { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }
.ems-center-box { position:absolute; left:380px; top:380px; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%; background:radial-gradient(circle,#fff 60%,#f7f8fc); border:1px dashed #d7dbe9; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:34px; }
.ems-center-box .t1 { font-size:26px; font-weight:700; color:var(--ems-navy); line-height:1.1; letter-spacing:.5px; }
.ems-center-box .t2 { font-size:30px; font-weight:800; color:var(--ems-navy); line-height:1.1; letter-spacing:1px; }
.ems-center-box .t3 { font-size:14px; letter-spacing:3px; color:#5b6580; margin-bottom:12px; }
.ems-center-box .dots { height:4px; width:120px; border-radius:4px; background:linear-gradient(90deg,#f7941d,#e8457a,#7b4bd1,#3b82f6,#17a2b8,#22a964); margin:6px 0 12px; }
.ems-center-box .desc { font-size:12.5px; color:#5b6580; line-height:1.55; min-height:58px; }
.ems-center-box .desc b { display:block; color:var(--ems-brand); margin-bottom:2px; font-size:13px; }
.ems-steps-list { list-style:none; margin:0; padding:0 0 0 10px; position:relative; }
.ems-steps-list:before { content:""; position:absolute; left:28px; top:14px; bottom:14px; width:2px; background:var(--ems-line); }
.ems-steps-list li { position:relative; padding:0 0 22px 62px; min-height:44px; }
.ems-steps-list li .n { position:absolute; left:0; top:0; width:38px; height:38px; line-height:38px; border-radius:50%; color:#fff; text-align:center; font-weight:700; font-size:14px; box-shadow:0 6px 14px rgba(0,0,0,.18); }
.ems-steps-list li b { display:block; font-size:15px; color:var(--ems-navy); }
.ems-steps-list li span { font-size:13px; color:#5b6580; line-height:1.6; }

/* Feature cards */
.ems-card { --mx:50%; --my:0%; position:relative; background:linear-gradient(165deg,#ffffff 0%,#f8f9fe 100%); border:1px solid var(--ems-line); border-radius:22px; padding:32px 28px 28px; height:100%; margin-bottom:0; overflow:hidden; transition:transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease, border-color .4s ease; }
/* cursor spotlight */
.ems-card:before { content:""; position:absolute; inset:0; background:radial-gradient(260px circle at var(--mx) var(--my), rgba(240,84,35,.12), transparent 70%); opacity:0; transition:opacity .35s ease; pointer-events:none; }
/* top accent line */
.ems-card:after { content:""; position:absolute; left:28px; right:28px; top:0; height:3px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,var(--ems-brand),#ff9a6b); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.22,.8,.3,1); }
.ems-card:hover { transform:translateY(-8px); box-shadow:0 28px 56px rgba(27,37,89,.14); border-color:#ffd9c9; }
.ems-card:hover:before { opacity:1; }
.ems-card:hover:after { transform:scaleX(1); }
.ems-card .num { position:absolute; right:24px; top:20px; font-size:44px; font-weight:700; line-height:1; letter-spacing:-1px; color:transparent; -webkit-text-stroke:1.5px #e3e6f2; transition:-webkit-text-stroke-color .35s ease, transform .35s ease; }
.ems-card:hover .num { -webkit-text-stroke-color:#ffc4ad; transform:translateY(-3px); }
.ems-card .ic { position:relative; width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,#fff1ea,#ffe0d2); box-shadow:inset 0 0 0 1px rgba(240,84,35,.15); color:var(--ems-brand); font-size:24px; line-height:56px; text-align:center; margin-bottom:22px; transition:transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease, background .4s ease; }
.ems-card:hover .ic { background:#fff; box-shadow:inset 0 0 0 2px var(--ems-brand), 0 12px 24px rgba(240,84,35,.25); transform:scale(1.08) rotate(-6deg); }
.ems-card h4 { position:relative; font-size:18px; font-weight:600; line-height:1.35; margin:0 0 10px; }
.ems-card p { position:relative; font-size:14px; line-height:1.75; color:#5b6580; margin:0; }
.ems-card .more { position:relative; display:inline-flex; align-items:center; margin-top:18px; font-size:12.5px; font-weight:600; color:var(--ems-brand); opacity:0; transform:translateX(-8px); transition:all .35s ease; }
.ems-card:hover .more { opacity:1; transform:translateX(0); }
.ems-row-eq { display:flex; flex-wrap:wrap; }
.ems-row-eq > [class*="col-"] { display:flex; box-sizing:border-box; padding-bottom:24px; }
.ems-row-eq .ems-card { width:100%; }
.ems-row-eq .ems-card:hover { z-index:3; }

/* Tip */
.ems-tip { display:flex; align-items:center; background:linear-gradient(90deg,#fff4ef,#fff); border:1px solid #ffd9c9; border-left:5px solid var(--ems-brand); border-radius:12px; padding:22px 26px; margin-top:40px; }
.ems-tip .bulb { font-size:28px; margin-right:18px; }
.ems-tip p { margin:0; font-size:14.5px; line-height:1.7; color:#44506b; font-style:italic; }
.ems-tip p b { color:var(--ems-brand); font-style:normal; }

/* CTA */
.ems-cta { background:linear-gradient(135deg,#1b2559,#2b3a86); border-radius:22px; padding:60px 40px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.ems-cta:before { content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; background:rgba(240,84,35,.35); filter:blur(30px); }
.ems-cta h2 { color:#fff; font-size:32px; font-weight:700; margin:0 0 12px; position:relative; }
.ems-cta p { color:#cfd5f0; margin:0 0 28px; font-size:16px; position:relative; }
.ems-cta a.ems-btn { position:relative; z-index:2; font-family:'Poppins',sans-serif; text-decoration:none; }
.ems-cta a.ems-btn.primary { background:#f05423 !important; border:2px solid #f05423 !important; color:#fff !important; box-shadow:0 10px 24px rgba(240,84,35,.4); }
.ems-cta a.ems-btn.primary:hover { background:#ff6a3d !important; border-color:#ff6a3d !important; color:#fff !important; transform:translateY(-2px); }
.ems-cta a.ems-btn.ghost { background:transparent !important; border:2px solid #fff !important; color:#fff !important; }
.ems-cta a.ems-btn.ghost:hover { background:#fff !important; color:#1b2559 !important; transform:translateY(-2px); }

@media (max-width: 991px) {
  .ems-flow-item { width:33.333%; }
  .ems-hero h1 { font-size:36px; }
  .ems-mock { margin-top:40px; }
}
@media (max-width: 767px) {
  .ems-section { padding:55px 0; }
  .ems-hero { padding:120px 0 80px; }
  .ems-hero h1 { font-size:30px; }
  .ems-heading { font-size:26px; }
  .ems-flow-item { width:50%; }
  .ems-stage:after { display:none; }
  .ems-stat { margin-bottom:16px; }
  .ems-table th, .ems-table td { padding:12px 14px; }
  .ems-cta { padding:40px 22px; }
}
@media (max-width: 480px) { .ems-flow-item { width:100%; } }

/* mobile fixes */
.ems-tip .bulb { flex:none; }
@media (max-width: 767px) {
  .ems-row-eq > [class*="col-"] { flex:0 0 100%; width:100%; max-width:100%; }
  .ems-float { display:none; }
  .ems-row-eq .ems-card { height:auto; }
  .ems-row-eq .ems-card:hover { transform:translateY(-3px); }
  .ems-main { padding:10px; }
  .ems-list .r small { display:none; }
  .ems-kpi b { font-size:15px; }
  .ems-tip { align-items:flex-start; padding:18px; }
  .ems-tip .bulb { margin-right:12px; font-size:24px; }
  .ems-btn { display:block; text-align:center; margin-right:0; }
  .ems-cta a.ems-btn { display:block; max-width:320px; margin:0 auto 12px; }
  .ems-heading { font-size:24px; }
}
