/* Amogh ERP — the public landing page (home.html): blue theme, the hero with a picture of the software, the ERP modules and the
   industry solutions. Pricing, Support and the footer keep the styles in landing.css. */

body.lp-blue { --hub-primary: #1a6cf0; --hub-primary-dark: #1352c4; --lp-navy: #0b1f4d; }
body.lp-blue .lp-mark { background: linear-gradient(135deg, #2a7ff5, #1352c4); }
body.lp-blue .lp-grad { background: linear-gradient(90deg, #1a6cf0, #2bb3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- header: menus with drop-downs ---- */
body.lp-blue .lp-bar { padding: 10px 40px; }
body.lp-blue .lp-nav { gap: 30px; }
body.lp-blue .lp-nav > a, .lp-dd > a { color: #1d2a44; font-size: 15px; font-weight: 500; text-decoration: none; padding: 8px 0; display: inline-flex; align-items: center; gap: 6px; }
.lp-dd > a i { font-size: 10px; }
.lp-nav-on { color: var(--hub-primary) !important; box-shadow: 0 2px 0 var(--hub-primary); }
.lp-dd { position: relative; }
.lp-dd-menu { position: absolute; top: 100%; left: -14px; min-width: 240px; background: #fff; border: 1px solid var(--hub-line); border-radius: 12px; box-shadow: 0 16px 36px rgba(11, 31, 77, .14); padding: 8px; display: none; z-index: 30; }
.lp-dd:hover .lp-dd-menu, .lp-dd:focus-within .lp-dd-menu { display: block; }
.lp-dd-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: #1d2a44; text-decoration: none; font-size: 14.5px; }
.lp-dd-menu a:hover { background: #eef4ff; color: var(--hub-primary); }
.lp-dd-menu a i { width: 18px; color: var(--hub-primary); }

/* ---- hero ---- */
.lp2-hero { position: relative; overflow: hidden; background: radial-gradient(900px 420px at 78% 30%, rgba(219, 232, 255, .85) 0%, rgba(219, 232, 255, 0) 70%), linear-gradient(100deg, rgba(245, 248, 255, .97) 0%, rgba(232, 240, 254, .93) 55%, rgba(221, 233, 253, .82) 100%), url("../img/hero-city.jpg") center 35% / cover no-repeat; }
.lp2-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(26, 108, 240, .05) 0 2px, transparent 2px 46px), linear-gradient(0deg, rgba(26, 108, 240, .10), transparent 45%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); pointer-events: none; }
.lp2-hero-in { position: relative; max-width: 1180px; margin: 0 auto; padding: 56px 24px 64px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.lp2-kicker { font-weight: 700; font-size: 17px; color: var(--lp-navy); margin-bottom: 14px; }
.lp2-hero h1 { margin: 0 0 10px; font-size: clamp(38px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -0.02em; color: var(--lp-navy); font-weight: 800; }
.lp2-hero h2 { margin: 0 0 16px; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.28; color: #16336b; font-weight: 700; max-width: 560px; }
.lp2-hero p { margin: 0 0 24px; color: #46557a; font-size: 15.5px; line-height: 1.65; max-width: 540px; }
.lp2-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; max-width: 560px; }
.lp2-feat { display: flex; flex-direction: column; gap: 2px; }
.lp2-feat b { font-size: 13.5px; color: var(--lp-navy); margin-top: 6px; }
.lp2-feat small { font-size: 12px; color: #5a6a8c; }
.lp2-fi { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 17px; }
.lp2-c-blue { background: #1a6cf0; } .lp2-c-green { background: #16a394; } .lp2-c-orange { background: #f59e0b; } .lp2-c-purple { background: #7c5cf0; }
.lp2-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.lp2-demo { display: inline-flex; align-items: center; gap: 8px; background: #0b1f4d; border-color: #0b1f4d; color: #fff; }
.lp2-demo:hover { background: #10307a; }

/* ---- the picture of the software (all sizes in em, so it scales with the box) ---- */
.lp2-mock { position: relative; font-size: clamp(8.5px, 1.05vw, 13px); width: 100%; aspect-ratio: 1.22 / 1; }
.mk-laptop { position: absolute; right: 0; top: 0; width: 92%; background: #fff; border-radius: 1.2em; border: .5em solid #16213e; box-shadow: 0 2.4em 4em rgba(11, 31, 77, .28); overflow: hidden; }
.mk-bar { display: flex; align-items: center; gap: .7em; padding: .7em 1em; border-bottom: 1px solid #e6ebf5; font-weight: 700; font-size: 1em; color: #16213e; }
.mk-logo { background: #1a6cf0; color: #fff; border-radius: .5em; padding: .15em .45em; font-size: .85em; }
.mk-dot { margin-left: auto; width: 1.4em; height: 1.4em; border-radius: 50%; background: #dbe6fb; }
.mk-body { display: grid; grid-template-columns: 12em 1fr; }
.mk-side { background: #f6f8fd; padding: .9em .7em; display: flex; flex-direction: column; gap: .35em; font-size: .9em; color: #4a5a7c; border-right: 1px solid #e6ebf5; }
.mk-side span { padding: .55em .7em; border-radius: .6em; white-space: nowrap; }
.mk-side span i { width: 1.4em; color: #7a8bb0; }
.mk-side .on { background: #1a6cf0; color: #fff; } .mk-side .on i { color: #fff; }
.mk-main { padding: 1em 1.1em 1.2em; }
.mk-title { font-weight: 800; font-size: 1.15em; color: #16213e; margin-bottom: .7em; }
.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; margin-bottom: .8em; }
.mk-stats div, .mk-card { border: 1px solid #e6ebf5; border-radius: .8em; padding: .7em .8em; background: #fff; }
.mk-stats small, .mk-card small, .mk-pstats small, .mk-pcard small { display: block; font-size: .78em; color: #6b7a9c; }
.mk-stats b { font-size: 1.35em; color: #16213e; }
.mk-stats div:nth-child(1) { border-top: .25em solid #1a6cf0; } .mk-stats div:nth-child(2) { border-top: .25em solid #16a394; } .mk-stats div:nth-child(3) { border-top: .25em solid #f59e0b; } .mk-stats div:nth-child(4) { border-top: .25em solid #7c5cf0; }
.mk-charts { display: grid; grid-template-columns: 1.6fr 1fr; gap: .6em; }
.mk-card svg { width: 100%; height: 6.5em; display: block; margin-top: .4em; }
.mk-donut-card { display: flex; flex-direction: column; align-items: center; }
.mk-donut { width: 6.4em; height: 6.4em; border-radius: 50%; margin-top: .5em; background: conic-gradient(#1a6cf0 0 38%, #16a394 38% 62%, #f59e0b 62% 82%, #7c5cf0 82% 100%); -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%); mask: radial-gradient(circle, transparent 42%, #000 43%); }
.mk-phone { position: absolute; left: 1%; bottom: -3%; width: 26%; background: #fff; border-radius: 2em; border: .45em solid #16213e; box-shadow: 0 1.6em 3em rgba(11, 31, 77, .32); padding: .9em .8em 1em; }
.mk-pbar { font-weight: 800; font-size: 1em; color: #16213e; margin-bottom: .6em; }
.mk-pstats { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; margin-bottom: .5em; }
.mk-pstats div, .mk-pcard { border: 1px solid #e6ebf5; border-radius: .7em; padding: .5em .6em; margin-bottom: .5em; }
.mk-pstats div { margin: 0; }
.mk-pstats b, .mk-pcard b { font-size: 1.15em; color: #16213e; }
.mk-pcard svg { width: 100%; height: 3.6em; display: block; }

/* ---- modules ---- */
.lp2-modules { padding-top: 56px; padding-bottom: 40px; max-width: 1240px; }
.lp2-sec-head { margin-bottom: 22px; }
.lp2-sec-head h3 { margin: 0 0 4px; font-size: clamp(24px, 3vw, 30px); color: var(--lp-navy); letter-spacing: -0.01em; }
.lp2-sec-head p { margin: 0; color: #5a6a8c; font-size: 15.5px; }
.lp2-mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; }
.lp2-mod { background: #fff; border: 1px solid #e3e9f6; border-radius: 14px; padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 18px rgba(20, 40, 90, .05); }
.lp2-mod-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; }
.lp2-mod h4 { margin: 4px 0 0; font-size: 16px; color: var(--lp-navy); }
.lp2-mod ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lp2-mod li { font-size: 12.8px; color: #46557a; }
.lp2-mod li::before { content: "•"; color: var(--hub-primary); margin-right: 6px; }
.lp2-mod button { align-self: flex-start; border: 0; background: none; color: var(--hub-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 0 0; }
.lp2-mod button:hover { text-decoration: underline; }

/* ---- industry solutions ---- */
.lp2-solutions { padding-top: 24px; max-width: 1240px; }
.lp2-sol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.lp2-sol { position: relative; overflow: hidden; border-radius: 16px; padding: 28px 26px 26px; min-height: 250px; color: #fff; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 14px 30px rgba(11, 31, 77, .18); }
.lp2-sol::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 50, .35) 0%, rgba(8, 20, 50, .88) 100%); }
.lp2-sol > * { position: relative; }
.lp2-sol-con { background: #2f3f5c url("../img/solution-construction.jpg") center / cover no-repeat; }
.lp2-sol-hos { background: #2c6aa8 url("../img/solution-hospital.jpg") center / cover no-repeat; }
.lp2-sol-arc { background: #2b2270 url("../img/architecture-blueprint.svg") center / cover no-repeat; }
.lp2-sol-crm { background: #223a63 url("../img/solution-business.jpg") center / cover no-repeat; }
.lp2-sol-ico { width: 40px; height: 40px; border-radius: 10px; background: #1a6cf0; display: grid; place-items: center; font-size: 18px; margin-bottom: 14px; box-shadow: 0 6px 16px rgba(26, 108, 240, .45); }
.lp2-sol-hos .lp2-sol-ico { background: #16a394; box-shadow: 0 6px 16px rgba(22, 163, 148, .45); }
.lp2-sol-arc .lp2-sol-ico { background: #6d4bd8; box-shadow: 0 6px 16px rgba(109, 75, 216, .45); }
.lp2-sol h4 { margin: 0; font-size: 20px; line-height: 1.2; }
.lp2-sol p { margin: 0 0 auto; font-size: 13.8px; line-height: 1.55; color: #e4ebfa; max-width: 320px; }
.lp2-sol-btn { align-self: flex-start; margin-top: 14px; background: #fff; color: var(--lp-navy); text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 9px; display: inline-flex; align-items: center; gap: 8px; }
.lp2-sol-btn:hover { background: #eaf1ff; }

/* ---- small screens ---- */
@media (max-width: 980px) {
  .lp2-hero-in { grid-template-columns: 1fr; padding-top: 40px; }
  .lp2-mock { max-width: 640px; margin: 0 auto; font-size: clamp(8px, 1.9vw, 13px); }
}
@media (max-width: 720px) {
  body.lp-blue .lp-bar { padding: 10px 14px; }
  .lp2-hero-in { padding: 32px 16px 44px; }
  .lp2-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp2-modules, .lp2-solutions { padding-left: 16px; padding-right: 16px; }
  .lp2-mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the details a "View Details" shows (read only) */
.lp-detail { display: flex; flex-direction: column; }
.lp-detail-row { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-top: 1px solid #e8ecf6; }
.lp-detail-row b { font-size: 15px; color: #0b1f4d; }
.lp-detail-row span { font-size: 14px; line-height: 1.55; color: #46557a; }