/* ============================================================ Fiap Systems, Rebrand Design System (app.css) Near-black core + 8-colour industry accent system Outfit (display) + Inter (text) ยท light theme ============================================================ */ /* Fonts (Outfit + Inter) are loaded via a non-blocking with preconnect in each page . */ :root { /* Ink / neutral ramp (slate) */ --ink: #0B1120; --ink-2: #111827; --ink-3: #1E293B; --slate-900: #0F172A; --slate-800: #1E293B; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748B; --slate-400: #94A3B8; --slate-300: #CBD5E1; --slate-200: #E2E8F0; --slate-100: #F1F5F9; --slate-50: #F8FAFC; --paper: #FFFFFF; /* Brand accent - single Fiap blue (no gradient) */ --brand: #1A5DC8; --brand-2: #2468D0; --brand-3: #5A9DF5; --grad: #1A5DC8; --grad-soft: rgba(26,93,200,.10); /* 8 industry accents (solid + tint) */ --a-retail:#2563EB; --a-retail-bg:#EAF1FE; --a-school:#7C3AED; --a-school-bg:#F1ECFE; --a-hospital:#0D9488; --a-hospital-bg:#E2F5F1; --a-restaurant:#D97706;--a-restaurant-bg:#FBEFDB; --a-bakery:#DB2777; --a-bakery-bg:#FBE9F1; --a-hotel:#EA580C; --a-hotel-bg:#FCEBE0; --a-car:#16A34A; --a-car-bg:#E6F4EA; --a-events:#DC2626; --a-events-bg:#FCEAEA; --a-shared:#475569; --a-shared-bg:#EEF1F5; --success:#16A34A; --warning:#D97706; --danger:#DC2626; --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow-md: 0 6px 24px rgba(15,23,42,.08); --shadow-lg: 0 18px 50px rgba(15,23,42,.12); --shadow-brand: 0 10px 30px rgba(26,93,200,.25); --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-full:9999px; --font-display:'Outfit', system-ui, sans-serif; --font-sans:'Inter', system-ui, -apple-system, sans-serif; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%} body{ font-family:var(--font-sans); background:var(--paper); color:var(--slate-900); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{list-style:none} .container{max-width:1180px;margin:0 auto;padding:0 24px} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .kicker{ display:inline-block;font-family:var(--font-sans);font-size:.72rem;font-weight:600; letter-spacing:2px;text-transform:uppercase;color:var(--brand); padding:6px 14px;border-radius:var(--r-full);background:var(--grad-soft);margin-bottom:16px; } /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--font-sans);font-weight:600;font-size:.95rem;cursor:pointer; border:1px solid transparent;border-radius:var(--r-full);padding:13px 26px; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;white-space:nowrap} .btn i{font-size:1.15em} .btn-primary{background:var(--ink-2);color:#fff;box-shadow:var(--shadow-md)} .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);background:var(--ink)} .btn-brand{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand)} .btn-brand:hover{transform:translateY(-2px);background:#154FA8} .btn-ghost{background:var(--paper);color:var(--slate-800);border-color:var(--slate-200)} .btn-ghost:hover{background:var(--slate-50);border-color:var(--slate-300);transform:translateY(-2px)} .btn-lg{padding:16px 34px;font-size:1.02rem} .btn-light{background:#fff;color:var(--ink-2)} .btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)} .btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)} .btn-outline-light:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.5)} /* ---------- Nav ---------- */ .nav{position:fixed;top:0;left:0;width:100%;z-index:1000; background:rgba(255,255,255,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-bottom:1px solid transparent;transition:all .3s ease} .nav.scrolled{background:rgba(255,255,255,.96);border-bottom-color:var(--slate-200);box-shadow:0 1px 14px rgba(15,23,42,.05)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px} .nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display); font-weight:700;font-size:1.3rem;letter-spacing:-.02em;color:var(--slate-900)} .nav-logo svg{width:34px;height:34px} .nav-logo small{font-weight:400;color:var(--slate-400)} .nav-links{display:flex;align-items:center;gap:30px} .nav-links>a{font-size:.9rem;font-weight:500;color:var(--slate-600);transition:color .2s} .nav-links>a:hover{color:var(--slate-900)} .lang-switch{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--slate-200); border-radius:var(--r-full);font-size:.8rem;color:var(--slate-600)} .lang-switch:hover{border-color:var(--brand);color:var(--brand)} .nav-cta{background:var(--ink-2);color:#fff!important;padding:9px 20px;border-radius:var(--r-full); font-weight:600;font-size:.85rem;transition:all .2s} .nav-cta:hover{background:var(--brand);transform:translateY(-1px)} .mobile-toggle{display:none;background:none;border:none;color:var(--slate-800);cursor:pointer;font-size:1.6rem} /* ---------- Hero ---------- */ .hero{position:relative;padding:130px 0 70px;overflow:hidden; background: radial-gradient(900px 500px at 85% -5%, rgba(26,93,200,.10), transparent 60%), radial-gradient(700px 500px at 5% 10%, rgba(37,99,235,.08), transparent 55%), linear-gradient(180deg, #fff 0%, var(--slate-50) 100%)} .hero-grid{position:absolute;inset:0;opacity:.5;pointer-events:none; background-image:linear-gradient(var(--slate-200) 1px,transparent 1px),linear-gradient(90deg,var(--slate-200) 1px,transparent 1px); background-size:70px 70px;mask-image:radial-gradient(circle at 50% 0,#000,transparent 70%)} .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:center} .hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;background:#fff; border:1px solid var(--slate-200);border-radius:var(--r-full);font-size:.78rem;font-weight:500; color:var(--slate-700);margin-bottom:24px;box-shadow:var(--shadow-sm)} .hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--success);animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} .hero h1{font-family:var(--font-display);font-size:3.55rem;line-height:1.05;font-weight:800; letter-spacing:-.03em;color:var(--slate-900);margin-bottom:20px} .hero .lede{font-size:1.12rem;color:var(--slate-600);max-width:520px;line-height:1.7;margin-bottom:28px} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px} .hero-meta{display:flex;gap:22px;flex-wrap:wrap;font-size:.82rem;color:var(--slate-500)} .hero-meta span{display:inline-flex;align-items:center;gap:7px} .hero-meta i{color:var(--brand)} /* hero industry switcher */ .switcher{margin-top:54px;text-align:center} .switcher-label{font-size:.78rem;font-weight:600;color:var(--slate-500);margin-bottom:10px} .switch-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .spill{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-full); border:1px solid var(--slate-200);background:#fff;font-size:.82rem;font-weight:500;color:var(--slate-700); cursor:pointer;transition:all .18s} .spill i{font-size:1rem;color:var(--acc,var(--slate-500))} .spill:hover{border-color:var(--acc,var(--slate-300));transform:translateY(-1px)} .spill.active{background:var(--acc,var(--ink-2));color:#fff;border-color:var(--acc,var(--ink-2))} .spill.active i{color:#fff} /* hero product frame */ .stage{position:relative;animation:floaty 7s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .frame{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:8px; box-shadow:var(--shadow-lg)} .frame-bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px 8px} .frame-bar span{width:10px;height:10px;border-radius:50%} .frame-bar span:nth-child(1){background:#F87171} .frame-bar span:nth-child(2){background:#FBBF24} .frame-bar span:nth-child(3){background:#34D399} .frame-bar small{margin-left:10px;font-size:.7rem;color:var(--slate-400)} .frame-screen{position:relative;border-radius:10px;overflow:hidden;background:var(--slate-100);aspect-ratio:16/10} .frame-screen img{width:100%;height:100%;object-fit:cover;object-position:top left; opacity:0;transition:opacity .35s ease;position:absolute;inset:0} .frame-screen img.show{opacity:1;position:relative} .frame-ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center; gap:12px;color:var(--acc,var(--slate-500));background:var(--acc-bg,var(--slate-100))} .frame-ph i{font-size:2.6rem} .frame-ph b{font-family:var(--font-display);font-size:1.05rem;color:var(--slate-700)} .frame-ph small{font-size:.78rem;color:var(--slate-500)} .stage-tag{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%); background:#fff;border:1px solid var(--slate-200);box-shadow:var(--shadow-md); border-radius:var(--r-full);padding:8px 18px;font-size:.8rem;font-weight:600;color:var(--slate-800); display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .stage-tag i{color:var(--acc,var(--brand))} /* ---------- Trust strip ---------- */ .trust{border-top:1px solid var(--slate-200);border-bottom:1px solid var(--slate-200); background:var(--slate-50);padding:34px 0} .trust-row{display:flex;flex-direction:column;align-items:center;gap:22px} .trust-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:34px} .trust-stat .n{font-family:var(--font-display);font-size:1.9rem;font-weight:700; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em} .trust-stat .l{font-size:.78rem;color:var(--slate-500);font-weight:500} .trust-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .tbadge{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:#fff; border:1px solid var(--slate-200);border-radius:var(--r-full);font-size:.78rem;font-weight:500;color:var(--slate-700)} .tbadge i{color:var(--success)} /* ---------- Section scaffolding ---------- */ .section{padding:96px 0} .section--alt{background:var(--slate-50)} .section--dark{background:var(--ink);color:#fff;position:relative;overflow:hidden} .head{text-align:center;max-width:660px;margin:0 auto 56px} .head h2{font-family:var(--font-display);font-size:2.5rem;font-weight:800;letter-spacing:-.02em; color:var(--slate-900);margin-bottom:14px;line-height:1.12} .section--dark .head h2{color:#fff} .head p{font-size:1.05rem;color:var(--slate-500);line-height:1.7} .section--dark .head p{color:var(--slate-300)} /* icon tile */ .ic{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center; font-size:1.6rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28);transition:transform .2s ease; background-image:linear-gradient(145deg, color-mix(in srgb, var(--acc,var(--slate-500)) 96%, #fff), color-mix(in srgb, var(--acc,var(--slate-500)) 74%, #000)); box-shadow:0 6px 16px color-mix(in srgb, var(--acc,var(--slate-500)) 36%, transparent)} .sol-card:hover .ic,.feat-card:hover .ic,.africa-card:hover .ic,.portal-card:hover .ic{transform:translateY(-2px) scale(1.05)} /* hero consolidation visual: apps you replace -> one Fiap hub */ .cstage{position:relative;width:100%;max-width:500px;margin:0 auto;aspect-ratio:1} .cs-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .cs-line{fill:none;stroke:url(#csGrad);stroke-width:2;stroke-dasharray:4 7;stroke-linecap:round;opacity:.65;animation:cs-flow 1.4s linear infinite} @keyframes cs-flow{to{stroke-dashoffset:-22}} .cs-dot{fill:var(--brand)} .cs-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:124px;height:124px;border-radius:30px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;text-align:center;z-index:3; background-image:linear-gradient(145deg,#4f93f6,#1A5DC8);box-shadow:0 20px 52px rgba(26,93,200,.45);animation:cs-pulse 3.2s ease-in-out infinite} .cs-hub b{font-size:.92rem;font-weight:700;line-height:1.05;margin-top:5px} .cs-hub span{font-size:.6rem;opacity:.88;text-transform:uppercase;letter-spacing:.09em;font-weight:600} @keyframes cs-pulse{0%,100%{box-shadow:0 18px 44px rgba(26,93,200,.38)}50%{box-shadow:0 22px 66px rgba(26,93,200,.62)}} .cs-app{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:104px;z-index:2;animation:cs-float 5.5s ease-in-out infinite} .cs-app .ic{width:48px;height:48px;font-size:1.4rem;border-radius:14px} .cs-app span{font-size:.72rem;font-weight:600;color:var(--slate-600);text-align:center;line-height:1.15} @keyframes cs-float{0%,100%{translate:0 0}50%{translate:0 -9px}} .cs-cap{text-align:center;max-width:430px;margin:24px auto 0;font-size:.92rem;color:var(--slate-500);font-weight:500} @media (max-width:920px){.cstage{max-width:430px}} @media (max-width:480px){.cstage{max-width:330px}.cs-app{width:84px}.cs-app span{font-size:.66rem}.cs-app .ic{width:42px;height:42px;font-size:1.25rem}.cs-hub{width:104px;height:104px;border-radius:26px}} /* accent helpers */ .acc-retail{--acc:var(--a-retail);--acc-bg:var(--a-retail-bg)} .acc-school{--acc:var(--a-school);--acc-bg:var(--a-school-bg)} .acc-hospital{--acc:var(--a-hospital);--acc-bg:var(--a-hospital-bg)} .acc-restaurant{--acc:var(--a-restaurant);--acc-bg:var(--a-restaurant-bg)} .acc-bakery{--acc:var(--a-bakery);--acc-bg:var(--a-bakery-bg)} .acc-hotel{--acc:var(--a-hotel);--acc-bg:var(--a-hotel-bg)} .acc-car{--acc:var(--a-car);--acc-bg:var(--a-car-bg)} .acc-events{--acc:var(--a-events);--acc-bg:var(--a-events-bg)} .acc-brand{--acc:var(--brand);--acc-bg:var(--grad-soft)} /* ---------- Solutions ---------- */ .sol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .sol-card{display:block;background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg); padding:24px;transition:all .28s ease;position:relative;overflow:hidden} .sol-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--acc,var(--brand)); transform:scaleX(0);transform-origin:left;transition:transform .28s ease} .sol-card:hover{transform:translateY(-5px);border-color:var(--acc,var(--slate-300));box-shadow:var(--shadow-md)} .sol-card:hover::before{transform:scaleX(1)} .sol-card h3{font-family:var(--font-display);font-size:1.12rem;font-weight:700;color:var(--slate-900);margin:16px 0 7px} .sol-card p{font-size:.84rem;color:var(--slate-500);line-height:1.6;margin-bottom:14px} .sol-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px} .tag{font-size:.68rem;font-weight:500;padding:3px 9px;border-radius:var(--r-full); background:var(--acc-bg,var(--slate-100));color:var(--acc,var(--slate-600))} .sol-link{font-size:.82rem;font-weight:600;color:var(--acc,var(--brand));display:inline-flex;align-items:center;gap:6px} .sol-card:hover .sol-link{gap:11px} .also{margin:34px auto 0;max-width:740px;text-align:center;background:#fff;border:1px solid var(--slate-200); border-radius:var(--r-lg);padding:20px 28px} .also b{color:var(--slate-800);font-weight:600} .also p{font-size:.86rem;color:var(--slate-500);line-height:1.7} .also a{color:var(--brand);font-weight:600} /* ---------- Features ---------- */ .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .feat-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:26px;transition:all .26s} .feat-card:hover{transform:translateY(-3px);border-color:var(--slate-300);box-shadow:var(--shadow-md)} .feat-card h3{font-family:var(--font-display);font-size:1.02rem;font-weight:700;color:var(--slate-900);margin:16px 0 8px} .feat-card p{font-size:.85rem;color:var(--slate-500);line-height:1.7} /* ---------- Mobile portals ---------- */ .portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .portal-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:24px;transition:all .26s} .portal-card:hover{transform:translateY(-3px);border-color:var(--slate-300);box-shadow:var(--shadow-md)} .portal-card h3{font-family:var(--font-display);font-size:1rem;font-weight:700;margin:14px 0 6px;color:var(--slate-900)} .portal-card>p{font-size:.82rem;color:var(--slate-500);line-height:1.6} .portal-card ul{margin-top:12px} .portal-card li{font-size:.8rem;color:var(--slate-600);padding:4px 0;display:flex;align-items:flex-start;gap:8px} .portal-card li i{color:var(--success);font-size:.95rem;margin-top:2px;flex-shrink:0} /* ---------- Deploy ---------- */ .deploy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .deploy-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg); padding:32px 26px;transition:all .26s} .deploy-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.07)} .deploy-card .ic{background-image:none;background:rgba(255,255,255,.10);color:#fff;box-shadow:none} .deploy-card h3{font-family:var(--font-display);font-size:1.12rem;font-weight:700;margin:18px 0 5px;color:#fff} .deploy-card .sub{font-size:.8rem;font-weight:600;color:var(--brand-3);margin-bottom:12px} .deploy-card p{font-size:.85rem;color:var(--slate-300);line-height:1.65} /* ---------- Platforms ---------- */ .platforms{display:flex;justify-content:center;flex-wrap:wrap;gap:16px} .plat-pill{display:flex;align-items:center;gap:12px;padding:16px 26px;background:#fff;border:1px solid var(--slate-200); border-radius:var(--r-lg);transition:all .24s} .plat-pill:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:var(--shadow-sm)} .plat-pill i{font-size:1.5rem;color:var(--brand)} .plat-pill span{font-weight:600;font-size:.92rem;color:var(--slate-800)} /* ---------- Ecosystem ---------- */ .eco-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .eco-card{padding:36px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-xl); position:relative;overflow:hidden;transition:all .26s} .eco-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--slate-300)} .eco-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)} .eco-badge{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:var(--brand);margin-bottom:14px} .eco-card h3{font-family:var(--font-display);font-size:1.35rem;font-weight:700;margin-bottom:10px;color:var(--slate-900)} .eco-card p{color:var(--slate-500);font-size:.9rem;line-height:1.7;margin-bottom:20px} .eco-link{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:600;font-size:.9rem} .eco-link:hover{gap:13px} /* ---------- Pricing (keeps JS hooks) ---------- */ .pricing-section{background:var(--slate-50)} .pricing-toggle-wrapper{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:44px; font-weight:600;color:var(--slate-500);font-size:.92rem} .pricing-toggle-wrapper .active{color:var(--slate-900)} .discount-badge{font-size:.66rem;font-weight:600;color:var(--success);background:#E6F4EA;padding:3px 9px;border-radius:var(--r-full)} .switch{position:relative;display:inline-block;width:46px;height:26px} .switch input{opacity:0;width:0;height:0} .slider{position:absolute;inset:0;cursor:pointer;background:var(--slate-300);border-radius:var(--r-full);transition:.3s} .slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s} .switch input:checked+.slider{background:var(--brand)} .switch input:checked+.slider:before{transform:translateX(20px)} .pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;max-width:1180px;margin:0 auto;align-items:stretch} .pricing-grid.grid-cloud{grid-template-columns:repeat(4,1fr)} .pricing-grid.grid-own{grid-template-columns:repeat(3,1fr);max-width:920px} .pricing-card{padding:28px 20px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg); text-align:center;transition:all .28s;display:flex;flex-direction:column} .pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .pricing-card.featured{border:2px solid var(--brand);box-shadow:var(--shadow-md);position:relative} .pricing-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap; background:var(--brand);color:#fff;font-size:.66rem;font-weight:600;padding:4px 13px;border-radius:var(--r-full)} .pricing-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--slate-400);margin-bottom:8px} .pricing-card h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin-bottom:12px;color:var(--slate-900)} .pricing-price{font-family:var(--font-display);font-size:2.4rem;font-weight:800;letter-spacing:-.02em;color:var(--slate-900);margin-bottom:2px} .pricing-price .period{font-size:.9rem;font-weight:400;color:var(--slate-400)} .pricing-price .pp-static{font-size:.9rem;font-weight:400;color:var(--slate-400)} .pricing-desc{font-size:.8rem;color:var(--slate-500);margin:10px 0 22px} .pricing-features{text-align:left;margin-bottom:24px;flex:1} .pricing-features li{padding:8px 0;font-size:.82rem;color:var(--slate-600);display:flex;align-items:flex-start;gap:9px;border-bottom:1px solid var(--slate-100)} .pricing-features li:last-child{border-bottom:none} .pricing-features li::before{content:"\2713";color:var(--success);font-weight:700;font-size:.8rem;margin-top:1px} .btn-pricing{width:100%;padding:13px;border-radius:var(--r-full);font-weight:600;font-size:.92rem;border:none;cursor:pointer;transition:all .25s;font-family:var(--font-sans)} .btn-pricing-primary{background:var(--ink-2);color:#fff} .btn-pricing-primary:hover{background:var(--brand);transform:translateY(-1px)} .btn-pricing-secondary{background:var(--slate-50);color:var(--slate-800);border:1px solid var(--slate-200)} .btn-pricing-secondary:hover{background:var(--slate-100)} /* deployment toggle + panels */ .deploy-toggle{display:flex;justify-content:center;gap:6px;background:var(--slate-100);border-radius:var(--r-full);padding:5px;width:max-content;max-width:100%;margin:0 auto 8px} .deploy-btn{display:inline-flex;align-items:center;gap:7px;border:none;background:transparent;color:var(--slate-600);font-family:var(--font-sans);font-size:.9rem;font-weight:600;padding:9px 18px;border-radius:var(--r-full);cursor:pointer;transition:all .2s;white-space:nowrap} .deploy-btn small{font-weight:500;color:var(--slate-400);font-size:.72rem} .deploy-btn i{font-size:1.1rem} .deploy-btn.active{background:#fff;color:var(--slate-900);box-shadow:var(--shadow-sm)} .deploy-btn.active i{color:var(--brand)} .deploy-panel{display:none;margin-top:14px} .deploy-panel.active{display:block;animation:fadeUpP .4s ease} @keyframes fadeUpP{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* trust chips */ .trust-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:22px} .tchip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--slate-600);background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-full);padding:6px 13px} .tchip i{color:var(--success)} /* hybrid split price */ .price-split{border:1px solid var(--slate-200);border-radius:var(--r-md);overflow:hidden;margin-bottom:6px;text-align:left} .price-split .ps-row{display:flex;justify-content:space-between;align-items:center;padding:9px 13px;font-size:.86rem} .price-split .ps-row span{color:var(--slate-500)} .price-split .ps-row b{font-family:var(--font-display);font-weight:700;color:var(--slate-900);font-size:1.05rem} .price-split .ps-row.then{border-top:1px solid var(--slate-200);background:var(--slate-50)} .price-subnote{font-size:.74rem;color:var(--slate-500);margin-bottom:14px} .lapse-note{font-size:.74rem;color:var(--slate-600);background:var(--slate-50);border-radius:var(--r-md);padding:9px 10px;line-height:1.5;text-align:left;margin-bottom:16px;display:flex;gap:6px} .lapse-note i{color:var(--brand);margin-top:1px;flex-shrink:0} /* add-ons */ .addons{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:24px} .addons-h{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--slate-400);font-weight:600} .addon-chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--slate-600);background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-full);padding:7px 13px} .addon-chip i{color:var(--brand)} .addon-chip b{font-weight:600;color:var(--slate-900)} /* exclusions note */ .excl-note{text-align:center;font-size:.82rem;color:var(--slate-500);margin:30px auto 0;max-width:640px} /* compare matrix */ .compare{max-width:760px;margin:48px auto 0} .compare-h{text-align:center;font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--slate-900);margin-bottom:18px} .compare-wrap{overflow-x:auto;border:1px solid var(--slate-200);border-radius:var(--r-lg);background:#fff} .compare-table{width:100%;border-collapse:collapse;font-size:.86rem} .compare-table th,.compare-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--slate-100)} .compare-table thead th{font-family:var(--font-display);font-weight:700;color:var(--slate-900);background:var(--slate-50)} .compare-table thead th i{color:var(--brand);margin-right:5px} .compare-table tbody td:first-child{color:var(--slate-500);font-weight:500} .compare-table tbody td{color:var(--slate-700)} .compare-table tr:last-child td{border-bottom:none} /* FAQ */ .faq{max-width:760px;margin:42px auto 0;display:flex;flex-direction:column;gap:10px} .faq-item{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md)} .faq-item summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:600;font-size:.92rem;color:var(--slate-900);display:flex;justify-content:space-between;align-items:center;gap:10px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary i{color:var(--slate-400);transition:transform .2s;flex-shrink:0} .faq-item[open] summary i{transform:rotate(180deg)} .faq-item p{padding:0 18px 16px;font-size:.86rem;color:var(--slate-600);line-height:1.65;margin:0} /* ---------- CTA ---------- */ .cta{background:var(--ink);color:#fff;position:relative;overflow:hidden;text-align:center;padding:96px 0} .cta::before{content:"";position:absolute;inset:0;background: radial-gradient(600px 300px at 50% -20%, rgba(26,93,200,.4), transparent 60%);opacity:.6} .cta .container{position:relative;z-index:2} .cta h2{font-family:var(--font-display);font-size:2.6rem;font-weight:800;letter-spacing:-.02em;margin-bottom:14px} .cta p{color:var(--slate-300);max-width:560px;margin:0 auto 30px;font-size:1.05rem;line-height:1.7} .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ---------- Footer ---------- */ .footer{background:var(--ink);color:var(--slate-400);padding:64px 0 30px;border-top:1px solid var(--ink-3)} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px} .footer-brand .nav-logo{color:#fff;margin-bottom:14px} .footer-brand p{font-size:.85rem;line-height:1.7;max-width:340px} .footer h4{color:#fff;font-family:var(--font-display);font-size:.95rem;margin-bottom:16px;font-weight:600} .footer ul li{margin-bottom:10px} .footer ul a{font-size:.85rem;color:var(--slate-400);transition:color .2s} .footer ul a:hover{color:#fff} .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; padding-top:24px;border-top:1px solid var(--ink-3);font-size:.8rem} .footer-bottom a{color:var(--slate-300)} .footer-bottom a:hover{color:#fff} /* ---------- Reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} .reveal{opacity:1;transform:none;transition:none} .stage,.hero-badge .dot{animation:none} } /* keyboard focus visibility */ :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px} .btn:focus-visible,.btn-pricing:focus-visible,.spill:focus-visible,.deploy-btn:focus-visible,.nav-cta:focus-visible,.deploy-btn:focus-visible{outline-offset:3px} .switch input:focus-visible+.slider{outline:2px solid var(--brand);outline-offset:2px} /* ---------- Responsive ---------- */ @media (max-width:1080px){ .sol-grid{grid-template-columns:repeat(2,1fr)} .pricing-grid{grid-template-columns:repeat(3,1fr)} .pricing-grid.grid-cloud{grid-template-columns:repeat(2,1fr)} .pricing-grid.grid-own{grid-template-columns:repeat(3,1fr)} } @media (max-width:920px){ .hero-inner{grid-template-columns:1fr;gap:40px} .hero .lede{max-width:none} .stage{max-width:560px;margin:0 auto} .feat-grid,.portal-grid,.deploy-grid,.eco-grid{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .nav-links{position:fixed;top:70px;left:0;right:0;flex-direction:column;gap:6px;padding:16px 24px; background:#fff;border-bottom:1px solid var(--slate-200);box-shadow:var(--shadow-md); transform:translateY(-130%);opacity:0;pointer-events:none;transition:all .3s} .nav-links.open{transform:none;opacity:1;pointer-events:auto} .nav-links>a{padding:6px 0} .mobile-toggle{display:block} .hero h1{font-size:2.55rem} .head h2,.cta h2{font-size:2rem} .sol-grid,.feat-grid,.portal-grid,.deploy-grid,.eco-grid,.pricing-grid{grid-template-columns:1fr} .pricing-grid.grid-cloud,.pricing-grid.grid-own{grid-template-columns:1fr} .deploy-toggle{flex-direction:column;width:100%;border-radius:var(--r-lg)} .deploy-btn{justify-content:center} .section{padding:70px 0} .trust-row{align-items:center} } /* ---------- Module showcase (centerpiece) ---------- */ .showcase{background:var(--slate-50)} .sc-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:6px} .sc-summary{text-align:center;font-size:1.02rem;color:var(--slate-600);line-height:1.7; margin:22px auto 30px;max-width:720px} .sc-summary b{color:var(--slate-900);font-weight:600} .sc-summary .big{font-family:var(--font-display);font-weight:700;background:var(--grad); -webkit-background-clip:text;background-clip:text;color:transparent} .sc-block{margin-top:24px} .sc-block-head{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600; padding:7px 15px;border-radius:var(--r-full);background:var(--acc-bg,var(--slate-100));color:var(--acc,var(--slate-700))} .sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:12px;margin-top:16px} .mtile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px; padding:18px 8px;border-radius:var(--r-md);border:1px solid var(--slate-200);background:#fff; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .mtile:hover{transform:translateY(-3px);border-color:var(--slate-300);box-shadow:var(--shadow-md)} .mtile:hover .mbadge{transform:translateY(-2px) scale(1.05)} .mbadge{width:58px;height:58px;border-radius:17px;display:flex;align-items:center;justify-content:center; font-size:1.75rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.30);transition:transform .2s ease} .mlabel{font-size:.76rem;line-height:1.32;color:var(--slate-700);font-weight:500} .sc-note{text-align:center;margin-top:30px;font-size:.86rem;color:var(--slate-500)} .sc-note a{color:var(--brand);font-weight:600} @media (max-width:760px){ .sc-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:9px} .mbadge{width:50px;height:50px;font-size:1.5rem} } /* ---------- Africa-built band ---------- */ .africa{position:relative;overflow:hidden;background: radial-gradient(720px 380px at 12% 0%, rgba(26,93,200,.07), transparent 60%), radial-gradient(720px 380px at 88% 100%, rgba(26,93,200,.05), transparent 60%), #fff} .africa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .africa-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:26px;transition:all .26s} .africa-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--slate-300)} .africa-card .ic{margin-bottom:16px} .africa-card h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--slate-900);margin-bottom:8px} .africa-card p{font-size:.86rem;color:var(--slate-500);line-height:1.65} /* ---------- Cost consolidation (pricing) ---------- */ .consolidate{max-width:860px;margin:0 auto 42px;background:#fff;border:1px solid var(--slate-200); border-radius:var(--r-lg);padding:24px 28px;box-shadow:var(--shadow-sm)} .consolidate .lead{text-align:center;font-size:.98rem;color:var(--slate-600);margin-bottom:18px} .consolidate .lead b{color:var(--slate-900);font-weight:600} .consolidate-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap} .replace-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:520px} .rchip{font-size:.76rem;color:var(--slate-500);background:var(--slate-100);border-radius:var(--r-full); padding:6px 12px;text-decoration:line-through;text-decoration-color:var(--slate-400)} .consolidate-arrow{color:var(--brand);font-size:1.5rem;display:flex;align-items:center} .one-plan{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:#fff;background:var(--ink-2); border-radius:var(--r-full);padding:11px 18px;font-size:.85rem;white-space:nowrap} .one-plan i{color:var(--brand-3)} /* ---------- Proof / testimonials ---------- */ .proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:34px} .quote{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:26px; display:flex;flex-direction:column;gap:14px;transition:all .26s} .quote:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--slate-300)} .quote .stars{color:var(--warning);font-size:.95rem;display:flex;gap:1px} .quote .ic{margin-bottom:16px} .quote h3{font-size:1.06rem;color:var(--slate-900);font-weight:700;margin-bottom:8px} .quote p{font-size:.92rem;color:var(--slate-700);line-height:1.7} .quote .who{display:flex;align-items:center;gap:12px;margin-top:auto} .quote .av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-weight:600;font-size:.85rem;background:var(--acc-bg,var(--slate-100));color:var(--acc,var(--slate-700))} .quote .who b{display:block;font-size:.86rem;color:var(--slate-900);font-weight:600} .quote .who span{font-size:.78rem;color:var(--slate-500)} .proof-cta{text-align:center} @media (max-width:920px){ .africa-grid,.proof-grid{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .africa-grid,.proof-grid{grid-template-columns:1fr} .consolidate-row{flex-direction:column} } /* ---------- Template detail pages ---------- */ .thero{position:relative;overflow:hidden;padding:122px 0 60px;background:linear-gradient(180deg,var(--acc-bg,var(--slate-50)) 0%,#fff 78%)} .back-link{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600;color:var(--acc,var(--brand));margin-bottom:18px} .back-link:hover{gap:10px} .thero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center} .thero .overline{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--acc,var(--brand));background:#fff;border:1px solid var(--slate-200);padding:5px 13px;border-radius:var(--r-full);margin-bottom:16px} .thero h1{font-family:var(--font-display);font-size:2.85rem;font-weight:800;letter-spacing:-.02em;line-height:1.08;color:var(--slate-900);margin-bottom:18px} .thero .pitch{font-size:1.05rem;color:var(--slate-600);line-height:1.7;margin-bottom:26px;max-width:540px} .tmod-section{padding:88px 0} .tmod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .tmod-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:24px;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease} .tmod-card:hover{transform:translateY(-3px);border-color:var(--acc,var(--slate-300));box-shadow:var(--shadow-md)} .tmod-card .ic{margin-bottom:14px} .tmod-card h3{font-family:var(--font-display);font-size:1.02rem;font-weight:700;color:var(--slate-900);margin-bottom:8px} .tmod-card p{font-size:.85rem;color:var(--slate-500);line-height:1.65} @media (max-width:920px){ .thero-grid{grid-template-columns:1fr;gap:36px} .thero .pitch{max-width:none} .tmod-grid{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .thero h1{font-size:2.15rem} .tmod-grid{grid-template-columns:1fr} .thero{padding:100px 0 50px} }