/* FaboIVR Smart Call System page (extends styles.css) */
.ivr-hero { padding-bottom: 96px; }
.ivr-hero .pill { cursor: default; }

/* Live call demo card */
.call-demo { background: #fff; border-radius: 26px; padding: 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); max-width: 480px; margin-left: auto; width: 100%; }
.cd-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cd-avatar { flex: 0 0 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--amber-50); color: var(--amber-600); font-size: 20px; animation: ring 1.6s ease-in-out infinite; }
@keyframes ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,173,31,.45); } 50% { box-shadow: 0 0 0 10px rgba(240,173,31,0); } }
.cd-head small { display: block; font-size: 12.5px; color: var(--muted); }
.cd-head strong { font: 800 17px var(--font-head); color: var(--ink); }
.cd-live { margin-left: auto; font: 800 11px var(--font-head); letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; background: #e7f8ee; color: var(--green); }
.cd-steps { display: grid; gap: 4px; margin-top: 14px; position: relative; }
.cd-steps li { display: flex; gap: 14px; padding: 10px 6px; position: relative; }
.cd-steps li > i { flex: 0 0 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 15px; background: var(--blue-50); color: var(--blue); }
.cd-steps strong { display: block; font-family: var(--font-head); color: var(--ink); font-size: 15px; }
.cd-steps span { font-size: 13.5px; color: var(--muted); }
.cd-steps .skip > i { background: #f2f4f8; color: #a3acbb; }
.cd-steps .skip strong { color: var(--muted); }
.cd-steps .now { background: #f0fbf4; border-radius: 14px; }
.cd-steps .now > i { background: var(--green); color: #fff; }
.cd-steps .now span { color: var(--green); font-weight: 600; }
.cd-foot { margin-top: 12px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13.5px; color: var(--muted); }
.cd-foot i { color: var(--blue); margin-right: 6px; }

/* Pain points */
.pain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pain-card { padding: 30px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.pain-card > i { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: #feecea; color: var(--coral); font-size: 20px; }
.pain-card h3 { font-size: 1.15rem; margin: 18px 0 8px; }
.pain-card p { color: var(--muted); font-size: 15px; }

/* Call flow */
.call-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: cf; }
.call-flow li { counter-increment: cf; position: relative; padding: 26px 20px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.call-flow li::after { content: counter(cf); position: absolute; top: 18px; right: 18px; font: 800 13px var(--font-head); color: #c4cfe4; }
.cf-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--navy); color: var(--amber); font-size: 18px; }
.call-flow h3 { font-size: 1.05rem; margin: 16px 0 6px; }
.call-flow p { font-size: 14px; color: var(--muted); }
.after-hours { display: flex; gap: 16px; align-items: center; margin-top: 24px; padding: 18px 22px; border-radius: var(--radius); background: var(--navy); color: #c9d4ea; }
.after-hours i { font-size: 22px; color: var(--amber); }
.after-hours strong { color: #fff; }

/* Benefits */
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.benefit { padding: 28px 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; transition: transform .25s, box-shadow .25s; }
.benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.benefit > i { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--amber-50); color: var(--amber-600); font-size: 20px; }
.benefit h3 { font-size: 1.08rem; margin: 18px 0 8px; }
.benefit p { font-size: 14.5px; color: var(--muted); }

/* Call history */
.ivr-split { align-items: center; }
.on-dark-h { color: #fff; }
.on-dark-p { color: #a9b7d3; }
.dark-ticks { display: grid; gap: 12px; margin-top: 26px; }
.dark-ticks li { display: flex; gap: 12px; align-items: center; color: #dbe4f5; }
.dark-ticks i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: var(--navy-900); font-size: 11px; }
.history { background: #fff; border-radius: 24px; padding: 20px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.h-head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 6px 14px; }
.h-head strong { font: 800 16px var(--font-head); color: var(--ink); }
.h-head span { font-size: 13px; color: var(--muted); }
.h-row { display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-top: 1px solid var(--line); }
.h-row > i { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; }
.h-row .in { background: #e7f8ee; color: var(--green); transform: rotate(45deg); }
.h-row .out { background: var(--blue-50); color: var(--blue); transform: rotate(45deg); }
.h-row.miss > i { background: #feecea; color: var(--coral); }
.h-row.closed > i { background: #eef1f6; color: var(--muted); }
.h-row strong { display: block; font-size: 14.5px; color: var(--ink); }
.h-row small { font-size: 12.5px; color: var(--muted); }
.h-row > span { margin-left: auto; font-size: 13px; font-weight: 600; }
.h-ok { color: var(--muted); }
.h-mute { color: #b8c0cf; }
.h-cb { padding: 6px 12px; border-radius: 999px; background: var(--blue); color: #fff; }
.h-row.miss { background: #fffafa; border-radius: 12px; }

/* Setup */
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.setup-steps { display: grid; gap: 14px; }
.ss { display: flex; gap: 16px; padding: 20px 22px; border-radius: var(--radius); background: var(--cream); }
.ss > span { flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--navy); color: #fff; font: 800 15px var(--font-head); }
.ss strong { font-family: var(--font-head); color: var(--ink); }
.ss p { font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.needs { padding: 28px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.needs h3 { font-size: 1.15rem; display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.needs h3 i { color: var(--blue); }
.needs ul { display: grid; gap: 14px; }
.needs li { display: flex; gap: 14px; align-items: center; font-size: 15px; color: var(--muted); }
.needs li i { flex: 0 0 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); }
.needs li strong { color: var(--ink); }
.needs-note { margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--amber-50); font-size: 14px; color: var(--text); }
.needs-note i { color: var(--amber-600); margin-right: 6px; }

@media (max-width: 1080px) {
    .call-demo { margin: 0 auto; }
    .call-flow { grid-template-columns: repeat(2, 1fr); }
    .benefits { grid-template-columns: repeat(2, 1fr); }
    .setup-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .pain, .call-flow, .benefits { grid-template-columns: 1fr; }
    .after-hours { align-items: flex-start; }
}

/* =========================================================
   Interactive call-flow diagram
   ========================================================= */
.flow-ui { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 26px; box-shadow: var(--shadow); }
.scenarios { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sc { display: inline-flex; gap: 8px; align-items: center; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font: 700 14.5px var(--font-head); color: var(--text); transition: all .2s; }
.sc:hover { border-color: var(--sky); color: var(--navy); }
.sc.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.sc.on i { color: var(--amber); }

.flow-caption { display: flex; align-items: center; gap: 14px; margin: 22px auto 8px; max-width: 760px; padding: 14px 18px; border-radius: 16px; background: var(--blue-50); min-height: 64px; }
.fc-step { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font: 800 15px var(--font-head); }
.flow-caption p { flex: 1; font-size: 16px; font-weight: 500; color: var(--ink); }
.fc-replay { border: 0; background: #fff; color: var(--blue); font: 700 13px var(--font-head); padding: 8px 14px; border-radius: 999px; white-space: nowrap; box-shadow: var(--shadow-sm); }
.fc-replay:hover { color: var(--navy); }

.diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 4px; scroll-behavior: smooth; }
.diagram { position: relative; width: 100%; min-width: 940px; aspect-ratio: 1120 / 560; }
.edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.edges path { fill: none; stroke: #d3dbe9; stroke-width: 2.5; stroke-dasharray: 6 6; transition: stroke .3s; }
.edges path.on { stroke: var(--blue); stroke-dasharray: 8 6; animation: dash .6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -14; } }

.elabel { position: absolute; left: calc(var(--x) / 1120 * 100%); top: calc(var(--y) / 560 * 100%); transform: translate(-50%, -50%); font: 700 11.5px var(--font-head); color: var(--muted); background: #fff; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }

.node {
    position: absolute; left: calc(var(--x) / 1120 * 100%); top: calc(var(--y) / 560 * 100%);
    width: calc(128 / 1120 * 100%); height: calc(88 / 560 * 100%); transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px;
    background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 6px;
    transition: border-color .3s, box-shadow .3s, transform .3s, opacity .3s, background .3s;
}
.node > i { font-size: 15px; color: #9aa6bb; margin-bottom: 3px; transition: color .3s; }
.node strong { font: 700 13px/1.2 var(--font-head); color: var(--ink); }
.node small { font-size: 11px; color: var(--muted); line-height: 1.25; }
.node-q { border-style: dashed; }
.node-dim { opacity: .55; }
.node.on { border-color: var(--blue); box-shadow: 0 0 0 5px rgba(47, 111, 228, .14), var(--shadow); transform: translate(-50%, -50%) scale(1.06); z-index: 2; }
.node.on > i { color: var(--blue); }
.node.current { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(47, 111, 228, .14), var(--shadow); } 50% { box-shadow: 0 0 0 11px rgba(47, 111, 228, .06), var(--shadow); } }
.node-ok.on { border-color: var(--green); background: #f0fbf4; box-shadow: 0 0 0 5px rgba(22, 163, 74, .15), var(--shadow); }
.node-ok.on > i { color: var(--green); }
.node-bad.on, .node-warn.on { border-color: var(--coral); background: #fff6f5; box-shadow: 0 0 0 5px rgba(242, 103, 90, .15), var(--shadow); }
.node-bad.on > i, .node-warn.on > i { color: var(--coral); }
.busy-tag { position: absolute; top: -10px; right: -8px; display: none; font: 800 10.5px var(--font-head); padding: 3px 8px; border-radius: 999px; background: var(--coral); color: #fff; }
.node.busy .busy-tag { display: block; }
.node.busy { border-color: #f6b4ad; background: #fffafa; }
.node.busy > i { color: var(--coral); }

.node-bar { width: calc(1088 / 1120 * 100%); height: calc(70 / 560 * 100%); flex-direction: row; gap: 12px; border-radius: 18px; background: var(--cream); border-style: dashed; }
.node-bar > i { margin: 0; font-size: 18px; }
.node-bar strong { font-size: 14.5px; }
.node-bar small { font-size: 13px; }
.node-bar.on { transform: translate(-50%, -50%); background: var(--navy); border: 1.5px solid var(--navy); box-shadow: 0 14px 30px -12px rgba(23, 59, 122, .6); }
.node-bar.on strong { color: #fff; }
.node-bar.on small { color: var(--amber); font-weight: 600; }
.node-bar.on > i { color: var(--amber); }
.scroll-hint { display: none; text-align: center; font-size: 13px; color: var(--muted); margin-top: 6px; }

/* Click to call */
.c2c { margin-top: 56px; }
.c2c-head { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.c2c-head .eyebrow { margin-bottom: 8px; }
.c2c-head h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; }
.c2c-head p { margin-top: 8px; color: var(--muted); }
.c2c-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: c2; }
.c2c-steps li { counter-increment: c2; position: relative; text-align: center; padding: 24px 18px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.c2c-steps li:not(:last-child)::after { content: "\f061"; font: 900 14px "Font Awesome 6 Free"; position: absolute; right: -16px; top: 62px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: var(--navy-900); }
.c2c-steps strong { display: block; margin-top: 16px; font-family: var(--font-head); color: var(--ink); }
.c2c-steps li > span { font-size: 14px; color: var(--muted); }
.c2c-art { height: 84px; display: grid; place-items: center; }
.mini-phone { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 14px; background: var(--blue); color: #fff; font: 800 15px var(--font-head); box-shadow: 0 10px 20px -8px rgba(47,111,228,.8); }
.ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); font-size: 26px; animation: ring2 1.6s ease-in-out infinite; }
@keyframes ring2 { 0%, 100% { box-shadow: 0 0 0 0 rgba(47,111,228,.35); } 50% { box-shadow: 0 0 0 14px rgba(47,111,228,0); } }
.caller-id { display: grid; padding: 10px 18px; border-radius: 14px; background: var(--navy); color: #fff; line-height: 1.25; }
.caller-id small { font-size: 11px; color: #a9b7d3; }
.caller-id b { font: 800 16px var(--font-head); }
.caller-id em { font-style: normal; font-size: 11.5px; color: var(--amber); }
.saved { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-size: 26px; }

@media (max-width: 1080px) {
    .c2c-steps { grid-template-columns: repeat(2, 1fr); }
    .c2c-steps li:nth-child(2)::after { display: none; }
}
@media (max-width: 980px) {
    .scroll-hint { display: block; }
}
@media (max-width: 720px) {
    .flow-ui { padding: 18px 14px; border-radius: 22px; }
    .sc { padding: 8px 13px; font-size: 13px; }
    .flow-caption { padding: 12px 14px; }
    .flow-caption p { font-size: 14.5px; }
    .fc-replay span { display: none; }
    .c2c-steps { grid-template-columns: 1fr; }
    .c2c-steps li::after { display: none; }
}