/* Friendly Infotech – software product pages (/products and each product) */
.fp-page{--pc:#2463eb;--ink:#1c2539;--mute:#5d666f;--line:#e6e9f0;--soft:#f5f7fb}
.fp-page .picon{flex:none}

/* badge with product colour */
.fp-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;color:var(--pc);
  background:color-mix(in srgb,var(--pc) 12%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc) 22%,transparent)}
.fp-badge-lg{width:64px;height:64px;border-radius:18px;color:#fff;background:var(--pc);box-shadow:0 10px 24px -10px var(--pc)}
.fp-card-cat{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--pc);text-transform:uppercase}

/* hero */
.fp-hero-brand{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.fp-hero-brand .heading{line-height:1.1}
.fp-hero-brand a{color:inherit}
.fp-hero-h{margin-bottom:14px}
.fp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.fp-chips li{font-size:14px;font-weight:500;padding:6px 12px;border-radius:999px;background:var(--soft);border:1px solid var(--line);color:var(--ink)}
.fp-hero-price{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:14px;background:color-mix(in srgb,var(--pc) 7%,#fff);border:1px solid color-mix(in srgb,var(--pc) 20%,transparent);margin-bottom:22px;max-width:420px}
.fp-hero-price span{font-size:13px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.fp-hero-price b{font-family:Poppins,sans-serif;font-size:24px;color:var(--ink);font-weight:600}
.fp-hero-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.fp-link-btn{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:16px;color:var(--ink);text-decoration:none;border-bottom:1.5px solid transparent;padding:4px 0}
.fp-link-btn:hover{color:var(--pc);border-color:currentColor}
.fp-note{display:flex;gap:10px;align-items:flex-start;margin-top:22px;font-size:15px;color:var(--mute);background:var(--soft);border-radius:12px;padding:12px 14px}
.fp-note .picon{margin-top:2px;color:var(--pc)}
.fp-note a{color:var(--pc);font-weight:600}

.fp-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.fp-stats div{padding:22px 20px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.fp-stats div:first-child{border-left:0}
.fp-stats b{font-family:Poppins,sans-serif;font-size:26px;line-height:1.15;color:var(--pc);font-weight:600}
.fp-stats span{font-size:15px;color:var(--mute)}

/* drawn app preview */
.fp-mock{--pc:#2463eb;border-radius:16px;background:#fff;border:1px solid #dfe3eb;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(28,37,57,.45),0 2px 6px rgba(28,37,57,.06);font-family:Inter,system-ui,sans-serif;color:#1c2539;user-select:none}
.fp-mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f3f5f9;border-bottom:1px solid #e3e7ee}
.fp-mock-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.fp-mock-bar i:nth-child(2){background:#febc2e}.fp-mock-bar i:nth-child(3){background:#28c840}
.fp-mock-bar span{margin-left:12px;flex:1;max-width:260px;font-size:11px;color:#6b7280;background:#fff;border:1px solid #e3e7ee;border-radius:6px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-mock-body{display:flex;min-height:330px}
.fp-mock-side{width:150px;flex:none;background:color-mix(in srgb,var(--pc) 92%,#000);color:#fff;padding:14px 10px}
.fp-mock-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;margin:0 4px 16px}
.fp-mock-brand span{display:inline-flex;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.18);align-items:center;justify-content:center}
.fp-mock-nav{font-size:11.5px;padding:7px 10px;border-radius:8px;opacity:.78;margin-bottom:2px}
.fp-mock-nav.on{background:rgba(255,255,255,.16);opacity:1;font-weight:600}
.fp-mock-main{flex:1;min-width:0;padding:16px;background:#f7f8fb;display:flex;flex-direction:column;gap:12px}
.fp-mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fp-mock-kpi{background:#fff;border:1px solid #e6e9f0;border-radius:10px;padding:10px 12px;position:relative;overflow:hidden}
.fp-mock-kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pc)}
.fp-mock-kpi small{display:block;font-size:10.5px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-mock-kpi b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.fp-mock-panel{flex:1;background:#fff;border:1px solid #e6e9f0;border-radius:10px;padding:12px;position:relative}
.fp-mock-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;margin-bottom:8px}
.fp-mock-title span{width:54px;height:8px;border-radius:4px;background:#eef0f5}
.fp-mock-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid #f0f2f6}
.fp-mock-row .dot{width:26px;height:26px;border-radius:8px;flex:none;background:color-mix(in srgb,var(--pc) 14%,#fff)}
.fp-mock-row div{flex:1;min-width:0}
.fp-mock-row b{display:block;font-size:12px;font-weight:600}
.fp-mock-row small{display:block;font-size:10.5px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-mock-row em{font-style:normal;font-size:12px;font-weight:700}
.fp-mock-row em.tag{font-size:10px;font-weight:600;padding:3px 8px;border-radius:999px}
.tag-alert{background:#fff1e6;color:#c2410c}.tag-ok{background:#e7f8ef;color:#0f7a4a}
.tag-now{background:color-mix(in srgb,var(--pc) 14%,#fff);color:var(--pc)}.tag-next{background:#f1f3f7;color:#5d666f}
.fp-mock-tables{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fp-mock-tables div{border-radius:9px;padding:9px 8px;border:1px solid #e6e9f0;text-align:center}
.fp-mock-tables b{display:block;font-size:13px}.fp-mock-tables small{font-size:10px;color:#6b7280}
.fp-mock-tables .t-run{background:color-mix(in srgb,var(--pc) 13%,#fff);border-color:color-mix(in srgb,var(--pc) 35%,#fff)}
.fp-mock-tables .t-run b{color:var(--pc)}
.fp-mock-tables .t-bill{background:#e7f8ef;border-color:#bfe9d2}.fp-mock-tables .t-bill b{color:#0f7a4a}
.fp-mock-chart{display:flex;align-items:flex-end;gap:8px;height:150px;padding:8px 150px 0 4px}
.fp-mock-chart i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--pc),color-mix(in srgb,var(--pc) 45%,#fff))}
.fp-mock-phone{position:absolute;right:14px;top:-34px;width:132px;background:#11151f;color:#fff;border-radius:20px;padding:14px 10px 12px;text-align:center;box-shadow:0 20px 40px -18px rgba(0,0,0,.6);border:3px solid #2a3040}
.fp-mock-phone small{display:block;font-size:9.5px;opacity:.7;margin-bottom:8px}
.ph-face{width:42px;height:42px;border-radius:50%;margin:0 auto 8px;background:radial-gradient(circle at 50% 38%,#cfd6e4 0 9px,transparent 10px),radial-gradient(ellipse at 50% 110%,#cfd6e4 0 18px,transparent 19px),#3a4152}
.fp-mock-phone b{display:block;font-size:10.5px;margin-bottom:10px}
.ph-btns{display:flex;gap:6px}.ph-btns span{flex:1;font-size:10px;font-weight:700;border-radius:8px;padding:6px 0}
.ph-btns .ok{background:#16a34a}.ph-btns .no{background:#dc2626}
.fp-shot img{width:100%;height:auto;border-radius:16px;border:1px solid #dfe3eb;box-shadow:0 40px 80px -40px rgba(28,37,57,.45)}

/* who it is for */
.fp-for-grid{display:grid;gap:20px;margin-top:40px;grid-template-columns:repeat(4,1fr)}
.fp-for-grid.fp-n3{grid-template-columns:repeat(3,1fr)}
.fp-for-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;transition:transform .25s,box-shadow .25s}
.fp-for-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(28,37,57,.35)}
.fp-num{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:15px;color:var(--pc);margin-bottom:14px}
.fp-for-card h3{margin-bottom:8px}

/* modules */
.fp-modules{background:var(--soft)}
.fp-mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.fp-mod{background:#fff;border-radius:18px;padding:24px;border:1px solid var(--line)}
.fp-mod-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.fp-mod-head h3{margin:0}
.fp-mod li,.fp-row-list li{display:flex;gap:9px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink);padding:5px 0}
.fp-mod li .picon,.fp-row-list li .picon{margin-top:3px;color:var(--pc)}
.fp-extras{margin-top:28px;background:#fff;border-radius:18px;padding:24px;border:1px solid var(--line)}
.fp-extras h3{margin-bottom:14px}
.fp-extras ul{display:flex;flex-wrap:wrap;gap:10px}
.fp-extras li{font-size:14.5px;padding:7px 13px;border-radius:10px;background:color-mix(in srgb,var(--pc) 7%,#fff);color:var(--ink)}

/* pricing */
.fp-sub{max-width:720px;margin:12px auto 0}
.fp-plans{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:36px}
.fp-plan{border:1px solid var(--line);border-radius:18px;padding:24px 20px;background:#fff;display:flex;flex-direction:column;gap:6px;text-align:center}
.fp-plan.hot{border-color:var(--pc);box-shadow:0 20px 40px -26px var(--pc)}
.fp-plan-name{font-weight:600;color:var(--mute)}
.fp-plan-price{font-family:Poppins,sans-serif;font-size:28px;font-weight:600;color:var(--ink)}
.fp-plan-price small{font-size:14px;color:var(--mute);font-weight:500}
.fp-plan-what{font-size:14px;color:var(--mute);margin-bottom:12px}
.fp-plan-btn{margin-top:auto;display:block;border-radius:999px;padding:10px;font-weight:600;color:#fff;background:var(--ink);text-decoration:none}
.fp-plan.hot .fp-plan-btn,.fp-plan-btn:hover{background:var(--pc);color:#fff}
.fp-includes{margin-top:24px;text-align:center;font-size:15px;color:var(--mute)}
.fp-includes b{color:var(--ink)}
.fp-quote{margin-top:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-radius:20px;padding:32px 36px;color:#fff;
  background:linear-gradient(120deg,var(--ink) 0%,color-mix(in srgb,var(--pc) 70%,var(--ink)) 100%)}
.fp-quote .heading,.fp-quote .text{color:#fff}
.fp-quote .text{opacity:.85;margin:8px 0 0}
.fp-faq{max-width:900px;margin:0 auto}

/* cards (hub, home, more products) */
.fp-grid{display:grid;gap:20px}
.fp-grid-4{grid-template-columns:repeat(4,1fr)}
.fp-grid-5{grid-template-columns:repeat(5,1fr)}
.fp-card{--pc:#2463eb;height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#e6e9f0);border-radius:18px;padding:22px;position:relative;transition:transform .25s,box-shadow .25s,border-color .25s}
.fp-card::before{content:"";position:absolute;left:22px;right:22px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--pc)}
.fp-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--pc) 40%,#fff);box-shadow:0 24px 44px -28px rgba(28,37,57,.45)}
.fp-card-top{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.fp-card-name{margin:0;line-height:1.15}
.fp-card-name a,.fp-hero-brand a{color:var(--ink,#1c2539);text-decoration:none}
.fp-card-name a:hover,.fp-hero-brand a:hover{color:var(--pc)}
.fp-card-name a::after{content:"";position:absolute;inset:0}
.fp-card .fp-card-cat{font-size:12px}
.fp-card p{color:var(--mute,#5d666f);margin-bottom:12px}
.fp-card-stats{margin:0 0 14px;font-size:14px;color:var(--mute,#5d666f)}
.fp-card-stats b{color:var(--ink,#1c2539)}
.fp-card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:14px;border-top:1px dashed var(--line,#e6e9f0);font-size:14px}
.fp-price{color:var(--mute,#5d666f)}
.fp-price b{color:var(--ink,#1c2539)}
.fp-more{font-weight:600;text-decoration:none;color:var(--pc);white-space:nowrap;position:relative;z-index:1}

/* hub rows */
.fp-row{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.fp-row:first-child{border-top:0;padding-top:20px}
.fp-row.rev{grid-template-columns:7fr 5fr}
.fp-row.rev .fp-row-text{order:2}
.fp-row-tag{color:var(--ink);margin:4px 0 10px}
.fp-row-list{margin:14px 0 18px}
.fp-row-foot{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-bottom:20px;font-size:15px}
.fp-mkt{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--mute);background:var(--soft);padding:4px 10px;border-radius:999px}
.fp-row .buttons{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.fp-row-visual a{display:block;text-decoration:none;color:inherit}
.fp-mock,.fp-mock *{text-decoration:none!important}
.fp-why{background:var(--soft)}
.fp-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.fp-why-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;--pc:#2463eb}
.fp-why-card h3{margin:14px 0 6px}

/* home section */
.fp-home{--ink:#1c2539;--mute:#5d666f;--line:#e6e9f0}
.fp-home .fp-grid-5 .fp-card p{font-size:15px}
.fp-grid-5 .fp-card-stats{display:none}
.fp-grid-5 .fp-card-foot,.fp-grid-4 .fp-card-foot{flex-direction:column;align-items:flex-start;gap:6px}
.fp-grid-5 .fp-card-top{flex-direction:column;align-items:flex-start;gap:12px}

@media (max-width:1199px){
  .fp-grid-5{grid-template-columns:repeat(3,1fr)}
  .fp-plans{grid-template-columns:repeat(3,1fr)}
  .fp-for-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991px){
  .fp-page .row.g-5{--bs-gutter-x:1.5rem}
  .fp-mod-grid,.fp-why-grid,.fp-grid-4{grid-template-columns:repeat(2,1fr)}
  .fp-row,.fp-row.rev{grid-template-columns:1fr;gap:28px;padding:40px 0}
  .fp-row.rev .fp-row-text{order:0}
  .fp-stats{grid-template-columns:repeat(2,1fr)}
  .fp-stats div:nth-child(3){border-left:0}
  .fp-stats div:nth-child(n+3){border-top:1px solid var(--line)}
  .fp-quote{flex-direction:column;align-items:flex-start}
}
@media (max-width:767px){
  .fp-mod-grid,.fp-why-grid,.fp-grid-4,.fp-grid-5,.fp-for-grid,.fp-for-grid.fp-n3{grid-template-columns:1fr}
  .fp-plans{grid-template-columns:repeat(2,1fr)}
  .fp-mock-side{display:none}
  .fp-mock-body{min-height:0}
  .fp-mock-kpi b{font-size:14px}
  .fp-mock-chart{padding-right:120px;height:130px}
  .fp-mock-phone{width:108px;top:-20px;right:8px}
  .fp-mock-tables{grid-template-columns:repeat(3,1fr)}
  .fp-mock-tables div:nth-child(n+10){display:none}
  .fp-stats b{font-size:21px}
  .fp-stats div{padding:16px 14px}
  .fp-quote{padding:26px 22px}
  .fp-badge-lg{width:54px;height:54px}
}
@media (max-width:420px){.fp-plans{grid-template-columns:1fr}.fp-mock-kpis{grid-template-columns:repeat(2,1fr)}.fp-mock-kpi:nth-child(3){display:none}}
@media (max-width:767px){
  .fp-home .fp-grid-5{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 2px 12px;margin:0 -2px;scrollbar-width:none}
  .fp-home .fp-grid-5::-webkit-scrollbar{display:none}
  .fp-home .fp-grid-5 > div{flex:0 0 80%;scroll-snap-align:start}
}