/* Our platforms section + Solutions dropdown. Loads after premium.css. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pf-section{background:radial-gradient(60% 50% at 15% 0%,rgba(18,183,95,.16),transparent 65%),radial-gradient(55% 50% at 90% 10%,rgba(79,140,255,.16),transparent 65%),#050706;color:#fff;position:relative;overflow:hidden}
.pf-section::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(#000,transparent 85%);-webkit-mask-image:linear-gradient(#000,transparent 85%);pointer-events:none}
.pf-section>.wrap{position:relative}
.pf-head h2{color:#fff}.pf-head p{color:#a9b9ae}.pf-head .kicker{color:#6fe0ab}
.pf-grid{display:grid;gap:22px}
@media(min-width:900px){.pf-grid{grid-template-columns:1fr 1fr;gap:28px}}
.pf-card{--ac:#12b75f;--ac2:#d9a93b;--glow:rgba(18,183,95,.45);position:relative;display:flex;flex-direction:column;padding:clamp(20px,3.2vw,32px);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -34px #000;transition:transform .35s var(--ease,ease),border-color .3s,box-shadow .35s;transition-delay:0s}
.pf-card.will-reveal{transition:opacity .6s var(--ease,ease) var(--d,0ms),transform .6s var(--ease,ease) var(--d,0ms)}
.pf-card.will-reveal.in{transition:transform .35s var(--ease,ease),border-color .3s,box-shadow .35s,opacity .6s}
.pf-card::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--ac),var(--ac2),transparent)}
.pf-card:hover{transform:translateY(-6px);border-color:var(--ac);box-shadow:0 40px 70px -30px var(--glow),0 0 0 1px var(--ac)}
.pf-attend{--ac:#4f8cff;--ac2:#22d3ee;--glow:rgba(79,140,255,.5)}
.pf-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.pf-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;font-size:.78rem;font-weight:800;letter-spacing:.02em;color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent);border:1px solid color-mix(in srgb,var(--ac) 40%,transparent)}
.pf-live{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:700;color:#b7c7bc}
.pf-live i{width:8px;height:8px;border-radius:50%;background:#3ddc97;box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:pfPulse 2.2s infinite}
@keyframes pfPulse{70%{box-shadow:0 0 0 8px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
/* mock windows */
.pf-mock{display:block;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0b100d;margin-bottom:20px;box-shadow:0 24px 40px -26px #000}
.pf-mock{height:216px}.pf-win{display:flex;flex-direction:column;height:100%}
.pf-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
.pf-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}.pf-bar i:first-child{background:#ef2b37}.pf-bar i:nth-child(2){background:#d9a93b}.pf-bar i:nth-child(3){background:#12b75f}
.pf-bar span{margin-left:8px;font-size:.68rem;color:#8da096;letter-spacing:.03em}
.pf-body{display:flex;gap:12px;padding:14px;flex:1;min-height:0}
.pf-side{display:flex;flex-direction:column;gap:9px;flex:none}.pf-side b{display:block;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.07)}.pf-side b:first-child{background:var(--ac)}
.pf-main{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.pf-row{display:flex;gap:14px;align-items:center}
.pf-donut{flex:none;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--ac) 0 62%,var(--ac2) 62% 84%,rgba(255,255,255,.1) 84%);-webkit-mask:radial-gradient(circle,transparent 55%,#000 56%);mask:radial-gradient(circle,transparent 55%,#000 56%);animation:pfSpin 1.4s var(--ease,ease) both}
@keyframes pfSpin{from{transform:rotate(-120deg);opacity:0}}
.pf-lines{flex:1;display:grid;gap:8px}.pf-lines u{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.1)}.pf-lines u:nth-child(1){width:82%;background:rgba(255,255,255,.2)}.pf-lines u:nth-child(2){width:64%}.pf-lines u:nth-child(3){width:46%}
.pf-bars{flex:1;display:flex;align-items:flex-end;gap:7px;min-height:56px}
.pf-bars span{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(var(--ac),color-mix(in srgb,var(--ac) 35%,transparent));transform-origin:bottom}
.pf-card.in .pf-bars span{animation:pfGrow .9s var(--ease,ease) both}.pf-bars span:nth-child(2){animation-delay:.05s!important}.pf-bars span:nth-child(3){animation-delay:.1s!important}.pf-bars span:nth-child(4){animation-delay:.15s!important}.pf-bars span:nth-child(5){animation-delay:.2s!important}.pf-bars span:nth-child(6){animation-delay:.25s!important}.pf-bars span:nth-child(7){animation-delay:.3s!important}.pf-bars span:nth-child(8){animation-delay:.35s!important}
@keyframes pfGrow{from{transform:scaleY(.05);opacity:.3}}
.pf-area{width:100%;height:64px;display:block}.pf-area .line{stroke-dasharray:420;stroke-dashoffset:0}
.pf-card.in .pf-area .line{animation:pfDraw 1.6s var(--ease,ease) both}.pf-card.in .pf-area .fill{animation:pfFade 1.6s ease both}
@keyframes pfDraw{from{stroke-dashoffset:420}}@keyframes pfFade{from{opacity:0}}
.pf-heat{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.pf-heat span{height:11px;border-radius:3px;background:rgba(79,140,255,calc(.12 + var(--a)*.78))}
.pf-insight{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.28)}.pf-insight i{width:16px;height:16px;border-radius:50%;background:#22d3ee;flex:none}.pf-insight u{display:block;height:7px;flex:1;max-width:70%;border-radius:4px;background:rgba(255,255,255,.28)}
/* copy */
.pf-name{font-size:clamp(1.55rem,3.6vw,2rem);color:#fff;margin:0 0 4px}
.pf-headline{font-weight:800;color:var(--ac);margin:0 0 8px;font-size:1.02rem}
.pf-desc{color:#b4c2b8;margin:0 0 16px}
.pf-feats{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin:0 0 22px}
.pf-feats li{display:flex;align-items:flex-start;gap:8px;font-size:.88rem;font-weight:600;color:#dbe7df;line-height:1.35}
.pf-feats .ic{color:var(--ac);margin-top:2px}
@media(max-width:420px){.pf-feats{grid-template-columns:1fr}}
.pf-cta{margin-top:auto;display:grid;gap:12px}
.pf-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 22px;border-radius:14px;font-weight:800;font-size:1rem;color:#04130a;background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:0 14px 34px -14px var(--glow);transition:transform .2s,box-shadow .2s,filter .2s}
.pf-attend .pf-btn{color:#031225}
.pf-btn .ic{transition:transform .2s}.pf-btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 20px 40px -14px var(--glow)}.pf-btn:hover .ic{transform:translateX(5px)}
.pf-btn:focus-visible,.pf-more:focus-visible{outline:3px solid #fff;outline-offset:3px}
.pf-more{text-align:center;font-weight:700;font-size:.9rem;color:#c6d4cb;padding:6px;border-radius:8px}.pf-more:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.pf-strip{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;padding:20px 24px;border-radius:18px;border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.03)}
.pf-strip p{margin:0;color:#c6d4cb;max-width:640px}.pf-strip strong{color:#fff}
.pf-strip .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
/* Solutions dropdown */
.nav-drop{position:relative;display:flex;flex-direction:column}
.nav-drop-row{display:flex;align-items:center;justify-content:space-between}
.drop-toggle{background:none;border:0;color:inherit;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:8px}
.drop-toggle svg{width:14px;height:14px;transition:transform .2s}
.nav-drop.open .drop-toggle svg{transform:rotate(180deg)}
.drop-panel{display:none;padding:6px 0 10px}
.nav-drop.open .drop-panel{display:block}
.drop-item{display:flex!important;align-items:center;gap:12px;padding:12px!important;border-radius:12px;border:0!important}
.drop-item::after,.drop-all::after{display:none!important}
.drop-ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff}
.drop-ic.church{background:linear-gradient(135deg,#0b6e4f,#12b75f)}.drop-ic.attend{background:linear-gradient(135deg,#2f6bff,#22d3ee)}
.drop-item b{display:block;font-size:.95rem;color:#fff}.drop-item small{display:block;color:#98a99f;font-size:.78rem;font-weight:500}
.drop-item .ext{margin-left:auto;color:#7f9187}
.drop-all{display:block!important;margin-top:4px;padding:10px 12px!important;font-size:.86rem!important;color:#6fe0ab!important;border:0!important}
@media(min-width:1000px){
  .drop-toggle{width:22px;height:22px;margin-left:2px}
  .drop-panel{position:absolute;top:calc(100% + 14px);left:-24px;width:380px;padding:10px;border-radius:18px;background:rgba(7,10,8,.97);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -20px #000;backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;display:block}
  .drop-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
  .nav-drop:hover .drop-panel,.nav-drop:focus-within .drop-panel,.nav-drop.open .drop-panel{opacity:1;visibility:visible;transform:none}
  .drop-item:hover{background:rgba(255,255,255,.07)}
}
@media(max-width:999px){.drop-panel{border-left:2px solid rgba(255,255,255,.14);margin:0 0 6px 6px;padding-left:8px}.nav-drop .nav-drop-row>a{flex:1}}
@media(prefers-reduced-motion:reduce){.pf-card,.pf-btn,.pf-live i,.pf-donut,.pf-bars span,.pf-area .line,.pf-area .fill{animation:none!important;transition:none!important}}
/* Product pages */
.pp-grid{display:grid;gap:32px;align-items:center}@media(min-width:900px){.pp-grid{grid-template-columns:1.05fr .95fr}}
.pp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.pp-visual{padding:18px!important}.pp-visual .pf-mock{margin-bottom:10px}.pp-visual:hover{transform:none}
.pp-note{font-size:.78rem;color:#98a99f;margin:0;text-align:center}
.pp-hero .pf-card{background:#0b100d}
/* Proof */
.proof-logos{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;margin-bottom:34px}
.proof-logos img{max-height:42px;width:auto;filter:grayscale(1);opacity:.75;transition:.2s}.proof-logos img:hover{filter:none;opacity:1}.proof-logos span{font-weight:800;color:#6a756d}
.proof-grid{display:grid;gap:18px}@media(min-width:800px){.proof-grid{grid-template-columns:repeat(3,1fr)}}
.proof-card{background:#fff;border:1px solid #e3e8e1;border-radius:18px;padding:22px;box-shadow:0 14px 30px -24px rgba(0,0,0,.4)}
.proof-card blockquote{margin:0 0 14px;font-size:1rem;line-height:1.6}.proof-card cite{font-style:normal;font-weight:800;display:block}.proof-card small{color:#6a756d}
/* School360 and Ubinifu SACCO themes, pending state, KPI mock */
.pf-school{--ac:#e0a43a;--ac2:#ef5d4a;--glow:rgba(224,164,58,.5)}
.pf-sacco{--ac:#a78bfa;--ac2:#38bdf8;--glow:rgba(167,139,250,.5)}
.pf-school .pf-btn,.pf-sacco .pf-btn{color:#120d02}
.pf-soon{color:#e0c27a}
.pf-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pf-kpis span{height:34px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}.pf-kpis span:first-child{background:color-mix(in srgb,var(--ac) 28%,transparent)}
.drop-ic.school{background:linear-gradient(135deg,#e0a43a,#ef5d4a);color:#160d02}.drop-ic.sacco{background:linear-gradient(135deg,#a78bfa,#38bdf8);color:#0c0820}
/* Real screenshots: phone-style frames on cards, product pages and the Demo Lab */
.pf-mock.pf-shot{height:auto;display:flex;justify-content:center;align-items:flex-end;padding:18px 18px 0;background:radial-gradient(70% 90% at 50% 0%,rgba(255,255,255,.10),transparent 70%),#060a08;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.pf-shot img{display:block;height:300px;width:auto;max-width:100%;object-fit:contain;object-position:top;border-radius:16px 16px 0 0;box-shadow:0 -14px 34px -14px rgba(0,0,0,.7)}
.shot-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 26px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.shot-rail:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:14px}
.phone{flex:0 0 auto;scroll-snap-align:start;margin:0;padding:10px;border-radius:32px;background:linear-gradient(160deg,#2c3630,#0a0e0c);border:1px solid rgba(255,255,255,.14);box-shadow:0 34px 60px -30px rgba(0,0,0,.6)}
.phone img{display:block;height:min(500px,68vh);width:auto;max-width:min(300px,72vw);border-radius:22px;object-fit:contain;object-position:top;background:#0b100d}
/* Innent Care clinic theme */
.pf-clinic{--ac:#2dd4bf;--ac2:#38bdf8;--glow:rgba(45,212,191,.45)}
.pf-clinic .pf-btn{color:#041311}
.drop-ic.clinic{background:linear-gradient(135deg,#2dd4bf,#38bdf8);color:#041311}
