/*
  Infranix — Product landing pages
  Loaded after home.css
*/

/* ==================== PRODUCT HERO ==================== */
.ix-phero { padding: 36px 0 90px; }
.ix-phero h1 { font-size: clamp(30px, 4.2vw, 48px); }
.ix-crumb { font-size: 13px; color: var(--ix-muted); margin-bottom: 36px; }
.ix-crumb a { color: var(--ix-muted); }
.ix-crumb a:hover { color: var(--ix-primary); }
.ix-crumb i { margin: 0 6px; font-size: 11px; }
.ix-crumb span { color: var(--ix-navy); font-weight: 500; }
.st-live { background: #12a150; color: #fff; }
.st-live i { font-size: 7px; vertical-align: 2px; margin-right: 3px; animation: ix-blink 1.6s infinite; }
@keyframes ix-blink { 50% { opacity: .3; } }

.ix-flow { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 6px; }
.ix-flow li {
  position: relative; background: #fff; border: 1px solid #cfdcf3; color: var(--ix-navy);
  font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 8px;
}
.ix-flow li:not(:last-child)::after {
  content: '\f105'; font-family: FontAwesome; color: var(--ix-primary);
  position: absolute; right: -9px; top: 50%; transform: translateY(-50%); z-index: 1; font-size: 14px;
}

/* ==================== MOCK SCREENS ==================== */
.ix-mock-wrap { position: relative; padding: 10px 0 40px 0; }
.ix-mock-desk {
  background: #fff; border-radius: 12px; overflow: hidden; margin-right: 135px;
  box-shadow: 0 30px 70px rgba(7,26,61,.22); border: 1px solid #dfe7f3;
}
.ix-mock-desk .win-bar { height: 22px; }
.ix-mock-desk .win-bar i { width: 8px; height: 8px; }
.md-body { display: flex; min-height: 300px; }
.md-side { width: 26%; background: #0c2a52; padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.md-side b { color: #fff; font-size: 13px; margin-bottom: 10px; }
.md-side b i { color: #5fb4ff; }
.md-side span { color: rgba(255,255,255,.6); font-size: 11px; padding: 5px 8px; border-radius: 6px; }
.md-side span.on { background: rgba(95,180,255,.18); color: #fff; }
.md-main { flex: 1; background: #f5f8fc; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.md-h { font-size: 13px; font-weight: 700; color: var(--ix-navy); }
.md-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.md-kpis div { background: #fff; border-radius: 8px; padding: 8px 10px; box-shadow: 0 1px 3px rgba(15,31,61,.08); }
.md-kpis small { display: block; font-size: 10px; color: var(--ix-muted); }
.md-kpis b { display: block; font-size: 18px; color: var(--ix-primary); line-height: 1.3; }
.md-kpis b.warn { color: #f2711c; }
.md-kpis em { display: block; height: 4px; border-radius: 2px; background: #e3eaf5; position: relative; overflow: hidden; }
.md-kpis em::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c, var(--ix-primary)); border-radius: 2px; }
.md-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; flex: 1; }
.md-chart, .md-aging { background: #fff; border-radius: 8px; padding: 8px 10px; box-shadow: 0 1px 3px rgba(15,31,61,.08); }
.md-chart small, .md-aging small { font-size: 10px; color: var(--ix-muted); display: block; margin-bottom: 6px; }
.md-chart .bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.md-chart .bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--ix-sky), var(--ix-primary)); }
.md-aging p { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 6px; margin: 0 0 9px; }
.md-aging p span { font-size: 10px; color: var(--ix-text); }
.md-aging p i { display: block; height: 8px; border-radius: 4px; width: var(--w); background: var(--c, #12a150); }

.ix-mock-phone {
  position: absolute; right: 0; bottom: 0; width: 160px;
  background: #121c2e; border-radius: 26px; padding: 8px;
  box-shadow: 0 26px 50px rgba(7,26,61,.32);
}
.mp-screen { background: #f4f7fc; border-radius: 19px; padding: 12px 10px; min-height: 300px; }
.mp-top { background: linear-gradient(90deg, var(--ix-primary), var(--ix-sky)); color: #fff; font-size: 11px; font-weight: 600; border-radius: 8px; padding: 7px 9px; margin-bottom: 10px; }
.mp-card { background: #fff; border-radius: 10px; padding: 10px; box-shadow: 0 1px 3px rgba(15,31,61,.08); margin-bottom: 10px; }
.mp-card > small { font-size: 10px; color: var(--ix-muted); }
.mp-line { height: 6px; width: 70%; border-radius: 3px; background: #dfe7f3; margin: 4px 0 8px; }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mp-grid div { background: #f4f7fc; border-radius: 6px; padding: 5px 6px; }
.mp-grid small { display: block; font-size: 9px; color: var(--ix-muted); }
.mp-grid b { font-size: 14px; color: var(--ix-navy); }
.mp-grid b.in { color: var(--ix-primary); border-bottom: 2px solid var(--ix-primary); }
.mp-use { margin-top: 8px; font-size: 11px; color: #0f8a4a; background: #e3f6ec; border-radius: 6px; padding: 4px 6px; text-align: center; }
.mp-use b { font-size: 13px; }
.mp-btn { background: var(--ix-primary); color: #fff; font-size: 11px; font-weight: 600; text-align: center; border-radius: 8px; padding: 8px; margin-bottom: 10px; }
.mp-list span { display: block; height: 22px; border-radius: 6px; background: #fff; margin-bottom: 6px; box-shadow: 0 1px 2px rgba(15,31,61,.06); }
.ix-mock-note { position: absolute; left: 0; bottom: 6px; font-size: 12px; color: var(--ix-muted); }

/* ==================== PROBLEMS ==================== */
.ix-prob {
  height: 100%; padding: 26px 22px; border-radius: var(--ix-radius);
  background: #fff7f2; border: 1px solid #fde1cf;
}
.ix-prob i { font-size: 26px; color: #e8630a; margin-bottom: 14px; display: block; }
.ix-prob h3 { font-size: 17px; margin-bottom: 8px; }
.ix-prob p { color: var(--ix-muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* ==================== WORKFLOW ==================== */
.ix-cycle { height: 100%; background: #fff; border: 1px solid var(--ix-border); border-radius: 18px; padding: 28px; box-shadow: var(--ix-shadow); }
.ix-cycle h3 { font-size: 19px; margin-bottom: 20px; }
.ix-cycle h3 i { color: var(--ix-primary); margin-right: 8px; }
.ix-cycle ol { list-style: none; counter-reset: s; padding: 0; margin: 0; }
.ix-cycle li {
  counter-increment: s; position: relative; padding: 0 0 20px 52px;
}
.ix-cycle li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ix-primary); color: #fff; font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
}
.ix-cycle li:not(:last-child)::after {
  content: ''; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; background: #d5e3fb;
}
.ix-cycle li:last-child { padding-bottom: 0; }
.ix-cycle li b { display: block; color: var(--ix-navy); font-size: 15px; line-height: 1.4; padding-top: 5px; }
.ix-cycle li span { font-size: 13px; color: var(--ix-muted); }
.ix-cycle.is-daily li::before { background: #12a150; }
.ix-cycle.is-daily h3 i { color: #12a150; }
.ix-cycle.is-daily li:not(:last-child)::after { background: #cdeedb; }

/* ==================== ROLES ==================== */
.ix-role { height: 100%; background: #fff; border: 1px solid var(--ix-border); border-radius: var(--ix-radius); padding: 26px 22px; box-shadow: var(--ix-shadow); }
.ix-role > span {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: #e8f0ff; color: var(--ix-primary); font-size: 20px; margin-bottom: 14px;
}
.ix-role h3 { font-size: 17px; margin-bottom: 10px; }
.ix-role ul { padding: 0; margin: 0; list-style: none; }
.ix-role li { position: relative; padding-left: 18px; font-size: 14px; color: var(--ix-muted); margin-bottom: 6px; line-height: 1.5; }
.ix-role li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ix-sky); }

/* ==================== MOBILE SECTION ==================== */
.ix-checks-1 { grid-template-columns: 1fr; }
.ix-note-dark { color: #9fb6d8; font-size: 14px; margin: -14px 0 0; }
.ix-note-dark i { color: var(--ix-sky); margin-right: 6px; }
.ix-phones { display: flex; justify-content: center; gap: 28px; align-items: flex-end; }
.ix-mock-phone.is-static { position: relative; width: 210px; right: auto; bottom: auto; }
.ix-mock-phone.is-static .mp-screen { min-height: 380px; }
.ix-mock-phone.is-mid { transform: translateY(-30px); }
.mp-prog { height: 6px; background: #dfe7f3; border-radius: 3px; overflow: hidden; }
.mp-prog i { display: block; height: 100%; width: var(--w); background: #12a150; }
.mp-cap { display: block; font-size: 10px; color: var(--ix-muted); margin: 4px 0 10px; }
.mp-row { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 8px; padding: 9px 10px; margin-bottom: 7px; font-size: 12px; box-shadow: 0 1px 2px rgba(15,31,61,.06); }
.mp-row b { color: var(--ix-navy); }
.mp-row span { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #eef1f5; color: #6b7a90; }
.mp-row.ok span { background: #e3f6ec; color: #0f8a4a; }
.mp-row.warn span { background: #ffe9ef; color: #e5395f; }
.mp-bill { background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 1px 3px rgba(15,31,61,.08); }
.mp-bill > small { font-size: 10px; color: var(--ix-muted); display: block; margin-bottom: 8px; }
.mp-bill p { display: flex; justify-content: space-between; font-size: 12px; margin: 0 0 6px; color: var(--ix-text); }
.mp-bill p b { color: var(--ix-navy); }
.mp-bill p.tot { border-top: 1px dashed #cfd9e8; padding-top: 8px; margin-top: 8px; font-weight: 700; }
.mp-bill p.tot b { color: var(--ix-primary); font-size: 15px; }
.mp-bill .qr { margin: 12px auto 0; width: 92px; height: 92px; border-radius: 8px; border: 1px solid #dfe7f3; display: grid; place-items: center; font-size: 70px; color: var(--ix-navy); }
.ix-mock-note-dark { text-align: center; font-size: 12px; color: #8ea4c6; margin: 14px 0 0; }

/* ==================== DEPLOYMENT ==================== */
.ix-deploy {
  position: relative; height: 100%; background: #fff; border: 1px solid var(--ix-border);
  border-radius: 18px; padding: 32px 30px; box-shadow: var(--ix-shadow);
}
.ix-deploy.is-rec { border: 2px solid var(--ix-primary); }
.ix-deploy .tag { position: absolute; top: -12px; left: 28px; background: var(--ix-primary); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 12px; border-radius: 20px; }
.ix-deploy > i { font-size: 34px; color: var(--ix-primary); margin-bottom: 12px; display: block; }
.ix-deploy h3 { font-size: 22px; margin-bottom: 8px; }
.ix-deploy p { color: var(--ix-muted); font-size: 15px; }
.ix-deploy ul { list-style: none; padding: 0; margin: 0; }
.ix-deploy li { font-size: 14px; color: var(--ix-text); margin-bottom: 8px; }
.ix-deploy li::before { content: '\f00c'; font-family: FontAwesome; color: #12a150; margin-right: 10px; }

/* ==================== FAQ ==================== */
.ix-faq .accordion-item { border: 1px solid var(--ix-border); border-radius: 12px !important; margin-bottom: 12px; overflow: hidden; }
.ix-faq .accordion-button { font-family: 'Prompt', sans-serif; font-weight: 600; font-size: 16px; color: var(--ix-navy); padding: 18px 22px; }
.ix-faq .accordion-button:not(.collapsed) { background: #eef4ff; color: var(--ix-primary); box-shadow: none; }
.ix-faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(22,96,240,.15); }
.ix-faq .accordion-body { color: var(--ix-muted); font-size: 15px; line-height: 1.7; padding: 4px 22px 20px; }
.ix-faq .accordion-button:not(.collapsed) + * .accordion-body,
.ix-faq .accordion-collapse.show .accordion-body { background: #eef4ff; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991.98px) {
  .ix-mock-desk { margin-right: 50px; }
}
@media (max-width: 575.98px) {
  .ix-mock-desk { margin-right: 0; }
  .md-side { display: none; }
  .md-row { grid-template-columns: 1fr; }
  .md-aging { display: none; }
  .ix-mock-wrap > .ix-mock-phone { width: 120px; bottom: -20px; }
  .ix-mock-wrap > .ix-mock-phone .mp-screen { min-height: 210px; padding: 8px 7px; }
  .ix-mock-wrap > .ix-mock-phone .mp-list { display: none; }
  .ix-mock-wrap > .ix-mock-phone { width: 136px; }
  .ix-mock-wrap > .ix-mock-phone .mp-grid { grid-template-columns: 1fr; }
  .ix-mock-wrap > .ix-mock-phone .mp-top,
  .ix-mock-wrap > .ix-mock-phone .mp-btn { font-size: 10px; }
  .ix-mock-phone.is-static { width: 160px; }
  .ix-mock-phone.is-static .mp-screen { min-height: 320px; }
  .ix-phones { gap: 12px; }
  .ix-mock-phone.is-mid { transform: none; }
  .ix-cycle { padding: 22px 18px; }
}