/* Mpatlisa Marketplace – Static Site (Teal Brand) */
:root{
  --teal-deep:#045f73;
  --teal:#0a7489;
  --teal-2:#18a9b9;
  --teal-3:#50dfd2;
  --mint:#a7f1dd;
  --ink:#0a2230;
  --muted:#5d7280;
  --bg:#f4fbfb;
  --bg-2:#ecf8f8;
  --card:#ffffff;
  --line:rgba(4,95,115,.12);
  --shadow:0 18px 50px rgba(4,95,115,.14);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--bg),#fff)}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92vw);margin:0 auto}
.small{font-size:.95rem;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .7rem;border-radius:999px;border:1px solid rgba(24,169,185,.28);background:rgba(80,223,210,.14);color:var(--teal-deep);font-weight:700;font-size:.85rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem 1.1rem;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(135deg,var(--teal-3),var(--mint));color:#08313b;font-weight:800;box-shadow:0 10px 30px rgba(24,169,185,.22)}
.btn.secondary,.btn.btn-secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:none}
.btn.dark{background:linear-gradient(135deg,var(--teal-deep),var(--teal));color:#fff;border:1px solid rgba(255,255,255,.10)}
.btn:active{transform:translateY(1px)}
.grid{display:grid;gap:18px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:0 10px 30px rgba(4,95,115,.07);border:1px solid var(--line);padding:20px}
.card h3{margin:0 0 8px 0}
.hr{height:1px;background:var(--line);margin:18px 0}
.kpi{display:flex;gap:12px;align-items:flex-start}.kpi .dot{width:10px;height:10px;border-radius:999px;background:var(--teal-3);margin-top:.55rem;flex:0 0 10px}.kpi p{margin:0;color:var(--muted)}
ul.clean{margin:10px 0 0 0;padding-left:18px;color:var(--muted)} ul.clean li{margin:6px 0}

header.site{position:sticky;top:0;z-index:30;background:rgba(4,95,115,.92);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(255,255,255,.10)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:900;letter-spacing:.2px}
.brand img{width:38px;height:38px;border-radius:12px;object-fit:contain;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:2px}
.brand span{display:block;line-height:1}.brand .sub{font-weight:700;color:rgba(255,255,255,.8);font-size:.82rem;margin-top:2px}
nav.links{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
nav.links a{color:rgba(255,255,255,.86);font-weight:650;font-size:.95rem;padding:.35rem .45rem;border-radius:10px}
nav.links a:hover{background:rgba(255,255,255,.08)} nav.links a.active{color:#fff;background:rgba(255,255,255,.10)}
.nav .cta{display:flex;gap:10px;align-items:center}

.hero{background:radial-gradient(1000px 450px at 18% 20%, rgba(80,223,210,.20), transparent 55%),radial-gradient(900px 450px at 85% 10%, rgba(167,241,221,.16), transparent 58%),linear-gradient(180deg,var(--teal-deep),#033848 72%);color:#fff;padding:56px 0 34px}
.hero h1{margin:10px 0 10px 0;font-size:clamp(2.05rem,4vw,3.1rem);letter-spacing:.2px}
.hero p{margin:0;color:rgba(255,255,255,.84);font-size:1.08rem;line-height:1.6}
.hero .row{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:stretch;margin-top:22px}
.hero .panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.hero .panel h3{margin:0 0 10px 0}.hero .panel .small{color:rgba(255,255,255,.78)}
.hero .bullets{display:grid;gap:10px;margin-top:14px}.hero .bullets .kpi p{color:rgba(255,255,255,.8)}
.hero .hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

main{padding:28px 0 44px}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:10px 0 12px}
.section-title h2{margin:0;font-size:1.6rem}.section-title p{margin:0;color:var(--muted)}

.footer{background:linear-gradient(180deg,#033848,var(--teal-deep));color:rgba(255,255,255,.82);padding:26px 0}
.footer a{color:rgba(255,255,255,.88)}
.footer .cols{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start}.footer .fine{margin-top:14px;font-size:.9rem;color:rgba(255,255,255,.66)}.footer .links{display:flex;gap:12px;flex-wrap:wrap}

.notice{border-left:4px solid var(--teal-2);background:rgba(80,223,210,.10);padding:14px 14px 14px 12px;border-radius:14px;border:1px solid rgba(24,169,185,.20)}
.notice strong{color:var(--teal-deep)}

.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:#fff}
.table th,.table td{padding:12px;border-bottom:1px solid rgba(2,6,23,.06);text-align:left}.table th{font-size:.9rem;color:#07303a;background:#eef8f8}.table tr:last-child td{border-bottom:none}

.success-wrap{padding:28px 0 50px}
.success-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:28px}
.success-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}.success-logo{width:68px;height:68px;border-radius:18px;object-fit:contain;background:rgba(80,223,210,.10);border:1px solid var(--line);padding:6px}
.success-state{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border-radius:999px;font-weight:800;font-size:.88rem}
.success-state.ok{background:rgba(80,223,210,.16);color:var(--teal-deep);border:1px solid rgba(24,169,185,.26)}
.success-state.wait{background:rgba(167,241,221,.18);color:#0b5d52;border:1px solid rgba(80,223,210,.22)}
.success-state.warn{background:rgba(255,214,102,.18);color:#8a5a00;border:1px solid rgba(255,214,102,.32)}
.success-state.err{background:rgba(255,107,107,.14);color:#8b1e1e;border:1px solid rgba(255,107,107,.24)}
.success-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0}.success-meta{padding:14px 16px;border-radius:16px;background:var(--bg-2);border:1px solid var(--line)}
.success-meta strong{display:block;font-size:.82rem;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}.success-message{font-size:1.03rem;line-height:1.7;color:#12313c;margin:14px 0 4px}
.success-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.token{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;word-break:break-all}

@media (max-width:880px){.hero .row,.footer .cols,.success-grid{grid-template-columns:1fr}nav.links{display:none}}