
:root {
  --fp-navy:#0F1B35; --fp-blue:#2563EB; --fp-purple:#7C3AED;
  --fp-teal:#0D9488; --fp-orange:#EA580C; --fp-slate:#64748B;
}

/* Sticky nav */
.fp-nav { position:sticky;top:0;z-index:300;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid #E2E8F0;display:flex;justify-content:center;flex-wrap:wrap;box-shadow:0 2px 12px rgba(0,0,0,.06); }
.fp-nav a { padding:14px 20px;font-size:.82rem;font-weight:600;color:var(--fp-slate);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:.2s; }
.fp-nav a:hover { color:var(--fp-navy); }

/* Hero */
.fp-hero { background:linear-gradient(135deg,#0F1B35 0%,#1E3A8A 55%,#1D4ED8 100%);padding:92px 24px 76px;text-align:center;position:relative;overflow:hidden; }
.fp-hero::before { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 55% at 50% 115%,rgba(37,99,235,.4) 0%,transparent 70%); }
.fp-hero-chip { display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:6px 16px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#93C5FD;margin-bottom:24px; }
.fp-hero-chip i { width:6px;height:6px;background:#60A5FA;border-radius:50%;display:inline-block;animation:fp-pulse 2s ease-in-out infinite; }
@keyframes fp-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
.fp-hero h1 { font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.03em;max-width:760px;margin:0 auto 18px; }
.fp-hero h1 em { font-style:normal;color:#60A5FA; }
.fp-hero p { font-size:clamp(.95rem,2vw,1.15rem);color:#CBD5E1;max-width:560px;margin:0 auto 40px;line-height:1.72; }
.fp-hero-pills { display:flex;flex-wrap:wrap;justify-content:center;gap:10px; }
.fp-pill { display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:9px 18px;color:#E2E8F0;font-size:.84rem;font-weight:500;text-decoration:none;transition:.2s; }
.fp-pill:hover { background:rgba(255,255,255,.18);color:#fff; }
.fp-pill svg { width:15px;height:15px;flex-shrink:0; }

/* Layout */
.fp-sec { padding:80px 24px; }
.fp-sec-dark { background:linear-gradient(160deg,#0F1B35 0%,#1A2E55 100%); }
.fp-sec-alt { background:#F8FAFC; }
.fp-wrap { max-width:1100px;margin:0 auto; }
.fp-hd { text-align:center;margin-bottom:52px; }
.fp-hd-ey { font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px; }
.fp-hd-ey.blue{color:var(--fp-blue)}.fp-hd-ey.teal{color:var(--fp-teal)}.fp-hd-ey.orange{color:var(--fp-orange)}
.fp-hd h2 { font-size:clamp(1.7rem,3.5vw,2.5rem);font-weight:800;color:var(--fp-navy);letter-spacing:-.022em;line-height:1.17;margin:0 0 14px; }
.fp-hd h2.light { color:#fff; }
.fp-hd p { font-size:1rem;color:var(--fp-slate);max-width:580px;margin:0 auto;line-height:1.72; }
.fp-hd p.light { color:#94A3B8; }

/* Wow grid — up to 8 cards, max 3 per row */
.fp-wow-grid { display:grid;gap:22px; }
@media(min-width:600px){ .fp-wow-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .fp-wow-grid { grid-template-columns:repeat(3,1fr); } }

.fp-wow-card { border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:16px; }

.fp-wow-ico { width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.fp-wow-ico svg { width:22px;height:22px; }
.fp-wow-ico img { width:46px;height:46px;border-radius:12px;object-fit:cover; }

.fp-wow-lbl { font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px; }
.fp-wow-card h3 { font-size:1.08rem;font-weight:800;color:var(--fp-navy);line-height:1.3;margin:0 0 8px; }
.fp-wow-card p  { font-size:.9rem;color:#475569;line-height:1.72;margin:0; }
.fp-wow-stats { display:flex;border-radius:11px;overflow:hidden;border:1px solid rgba(0,0,0,.08);margin-top:auto; }
.fp-wow-stat  { flex:1;text-align:center;padding:12px 6px;background:rgba(255,255,255,.72);border-right:1px solid rgba(0,0,0,.06); }
.fp-wow-stat:last-child { border-right:none; }
.fp-wow-sn { font-size:1.2rem;font-weight:800;line-height:1;margin-bottom:3px; }
.fp-wow-sl { font-size:10px;color:var(--fp-slate);font-weight:500; }

/* Stakeholder tabs */
.fp-tabs-nav { display:flex;justify-content:center;flex-wrap:wrap;border-bottom:2px solid #E2E8F0;background:#fff; }
.fp-tab-btn { padding:16px 30px;font-size:.9rem;font-weight:600;color:var(--fp-slate);background:none;border:none;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;display:flex;align-items:center;gap:7px;transition:.2s; }
.fp-tab-btn:hover { color:var(--fp-navy); }
.fp-tab-btn.active.blue   { color:var(--fp-blue);   border-bottom-color:var(--fp-blue); }
.fp-tab-btn.active.purple { color:var(--fp-purple); border-bottom-color:var(--fp-purple); }
.fp-tab-btn.active.orange { color:var(--fp-orange); border-bottom-color:var(--fp-orange); }
.fp-tab-btn svg { width:17px;height:17px;flex-shrink:0; }
.fp-tab-panel { display:none;padding:56px 24px; }
.fp-tab-panel.active { display:block; }
.fp-tab-in { max-width:1100px;margin:0 auto; }

.fp-sth { margin-bottom:42px; }
.fp-sth-ey { font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px; }
.fp-sth-ey.blue{color:var(--fp-blue)}.fp-sth-ey.purple{color:var(--fp-purple)}.fp-sth-ey.orange{color:var(--fp-orange)}
.fp-sth h2 { font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;color:var(--fp-navy);letter-spacing:-.02em;line-height:1.2;margin:0 0 10px; }
.fp-sth > p { font-size:.95rem;color:var(--fp-slate);max-width:540px;line-height:1.72;margin:0; }
.fp-sth-stats { display:flex;border-radius:12px;overflow:hidden;border:1px solid #E2E8F0;width:fit-content;margin-top:22px; }
.fp-sth-stat  { padding:13px 22px;border-right:1px solid #E2E8F0;text-align:center; }
.fp-sth-stat:last-child { border-right:none; }
.fp-sth-sn { font-size:1.25rem;font-weight:800;line-height:1;margin-bottom:3px; }
.fp-sth-sn.blue{color:var(--fp-blue)}.fp-sth-sn.purple{color:var(--fp-purple)}.fp-sth-sn.orange{color:var(--fp-orange)}
.fp-sth-sl { font-size:10px;color:var(--fp-slate);font-weight:600;text-transform:uppercase;letter-spacing:.06em; }

/* Feature cards */
.fp-feat-grid { display:grid;gap:14px; }
@media(min-width:600px){ .fp-feat-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .fp-feat-grid { grid-template-columns:repeat(3,1fr); } }
.fp-feat-card { border:1px solid #E2E8F0;border-radius:14px;padding:22px;background:#fff;transition:.2s; }
.fp-feat-card:hover { border-color:#CBD5E1;box-shadow:0 4px 20px rgba(15,27,53,.07);transform:translateY(-2px); }
.fp-feat-ico { width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0; }
.fp-feat-ico svg { width:18px;height:18px; }
.fp-feat-ico img { width:38px;height:38px;border-radius:10px;object-fit:cover; }
.fp-feat-card h4 { font-size:.9rem;font-weight:700;color:var(--fp-navy);margin:0 0 7px; }
.fp-feat-card p  { font-size:.83rem;color:var(--fp-slate);line-height:1.65;margin:0; }

/* BVA */
.fp-bva-tbl { width:100%;border-collapse:separate;border-spacing:0 8px; }
.fp-bva-tbl thead th { padding:13px 18px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:10px; }
.fp-bva-tbl thead th.b { background:rgba(239,68,68,.15);color:#FCA5A5; }
.fp-bva-tbl thead th.a { background:rgba(16,185,129,.15);color:#6EE7B7; }
.fp-bva-tbl thead th.m { width:36px; }
.fp-bva-tbl tbody td { padding:13px 18px;font-size:.88rem;border-radius:10px; }
.fp-bva-tbl tbody td.b { background:rgba(239,68,68,.07);color:#FCA5A5;border:1px solid rgba(239,68,68,.15); }
.fp-bva-tbl tbody td.a { background:rgba(16,185,129,.07);color:#6EE7B7;border:1px solid rgba(16,185,129,.15); }
.fp-bva-tbl tbody td.m { text-align:center;background:none; }
.fp-bva-dot { width:7px;height:7px;background:#334155;border-radius:50%;display:inline-block; }

/* Interfaces */
.fp-int-grid { display:grid;gap:16px; }
@media(min-width:600px){ .fp-int-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .fp-int-grid { grid-template-columns:repeat(3,1fr); } }
.fp-int-card { border:1px solid #E2E8F0;border-radius:14px;padding:24px;background:#fff;display:flex;gap:16px;transition:.2s; }
.fp-int-card:hover { border-color:#BFDBFE;box-shadow:0 4px 20px rgba(37,99,235,.08); }
.fp-int-card.pwa-card { grid-column:1/-1; }
.fp-int-ico { width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.fp-int-ico.web{background:#EFF6FF}.fp-int-ico.mobile{background:#F5F3FF}.fp-int-ico.pwa{background:#F0FDFA}
.fp-int-ico svg { width:20px;height:20px; }
.fp-int-ico.web svg{color:var(--fp-blue)}.fp-int-ico.mobile svg{color:var(--fp-purple)}.fp-int-ico.pwa svg{color:var(--fp-teal)}
.fp-int-badge { display:inline-block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:100px;padding:3px 10px;margin-bottom:6px; }
.fp-int-badge.web{background:#EFF6FF;color:var(--fp-blue)}.fp-int-badge.mobile{background:#F5F3FF;color:var(--fp-purple)}.fp-int-badge.pwa{background:#F0FDFA;color:var(--fp-teal)}
.fp-int-card h4 { font-size:.92rem;font-weight:700;color:var(--fp-navy);margin:0 0 6px; }
.fp-int-card p  { font-size:.82rem;color:var(--fp-slate);line-height:1.65;margin:0; }

/* CTA */
.fp-cta { background:linear-gradient(135deg,#1E3A8A,#2563EB);padding:80px 24px;text-align:center; }
.fp-cta h2 { font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:#fff;letter-spacing:-.02em;margin:0 0 14px; }
.fp-cta p  { font-size:1rem;color:#BFDBFE;max-width:500px;margin:0 auto 36px;line-height:1.72; }
.fp-cta-btn { display:inline-flex;align-items:center;gap:9px;background:#fff;color:#1D4ED8;font-size:.95rem;font-weight:700;padding:15px 34px;border-radius:100px;text-decoration:none;box-shadow:0 4px 20px rgba(0,0,0,.2);transition:.2s; }
.fp-cta-btn:hover { transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.25); }
.fp-cta-btn svg { width:17px;height:17px; }

@media(max-width:559px){ .fp-tab-btn{padding:13px 16px;font-size:.82rem} .fp-nav a{padding:11px 12px;font-size:.76rem} }
