@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{
  /* Koonolo (page identity: header, footer, base) — koonolo.com/assets/css/app.css */
  --koonolo-blue:#008ecc;--koonolo-dark:#0170a4;--koonolo-light:#23ace4;
  --koonolo-ink:#24343a;--koonolo-muted:#6f6c6d;--koonolo-line:#dce7eb;--koonolo-soft:#f3f8fa;
  /* Widgoo (featured product: CTA, brand card) — widgoo.com/assets/css/app.css */
  --widgoo:#017cfc;--widgoo-dark:#015cb8;--widgoo-soft:#e8f3ff;
  --paper:#f5f7f8;
  font-family:'DM Sans',Arial,sans-serif;color:var(--koonolo-ink);background:var(--paper);
}
*{box-sizing:border-box}body{margin:0}
a{color:inherit}
.ribbon{background:var(--koonolo-dark);color:#fff;font-size:.76rem}
.ribbon div{width:min(1120px,calc(100% - 40px));margin:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;flex-wrap:wrap}
.ribbon a{font-weight:800;text-decoration:none;border-bottom:1px solid #ffffff88}
.topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--koonolo-line)}
.topbar-inner{width:min(1120px,calc(100% - 40px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand-koonolo{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-koonolo img{display:block;width:154px;height:auto}
.host-badge{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--koonolo-muted)}
.host-badge code{border:1px solid var(--koonolo-line);background:var(--koonolo-soft);border-radius:999px;padding:6px 12px;color:var(--koonolo-dark);font-family:inherit}
.host-badge a{color:var(--widgoo-dark);font-weight:800;text-decoration:none}
.wrap{width:min(1120px,calc(100% - 40px));margin:26px auto 70px}
.hero{overflow:hidden;border:1px solid var(--koonolo-line);border-radius:24px;background:#fff;box-shadow:0 24px 70px rgba(1,112,164,.08)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:0}
.hero-copy{padding:52px 46px 44px;background:linear-gradient(180deg,var(--koonolo-soft),#fff 70%)}
.eyebrow{color:var(--koonolo-blue);font-size:.7rem;font-weight:800;letter-spacing:.18em}
.hero-copy h1{margin:14px 0 12px;font-family:Manrope,sans-serif;font-size:clamp(2rem,5vw,3.1rem);line-height:1.02;letter-spacing:-.03em;color:var(--koonolo-ink)}
.hero-copy h1 em{color:var(--widgoo-dark);font-style:normal}
.hero-copy p{margin:0;max-width:60ch;color:var(--koonolo-muted);line-height:1.7}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;font-weight:800;font-size:.9rem;text-decoration:none;border:1px solid transparent}
.btn-widgoo{background:var(--widgoo);border-color:var(--widgoo);color:#fff}
.btn-widgoo:hover{background:var(--widgoo-dark)}
.btn-koonolo{border-color:var(--koonolo-blue);color:var(--koonolo-dark);background:#fff}
.btn-koonolo:hover{background:var(--koonolo-soft)}
.hero-widgoo{padding:40px 36px;background:linear-gradient(180deg,var(--widgoo-soft),#fff);border-left:1px solid var(--koonolo-line);display:flex;flex-direction:column;justify-content:center;gap:14px}
.hero-widgoo img{width:min(260px,100%);height:auto}
.hero-widgoo strong{font-family:Manrope,sans-serif;font-size:1.05rem}
.hero-widgoo p{margin:0;font-size:.9rem;color:var(--koonolo-muted);line-height:1.6}
.hero-widgoo ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:.86rem;color:var(--koonolo-ink)}
.hero-widgoo li::before{content:"✓ ";color:var(--widgoo-dark);font-weight:800}
.brands{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.brand-card{border:1px solid var(--koonolo-line);border-radius:18px;background:#fff;padding:22px;display:grid;gap:10px}
.brand-card img{height:40px;width:auto;max-width:100%}
.brand-card h2{margin:0;font-family:Manrope,sans-serif;font-size:1.05rem}
.brand-card p{margin:0;font-size:.88rem;color:var(--koonolo-muted);line-height:1.6}
.brand-card.koonolo{border-top:4px solid var(--koonolo-blue)}
.brand-card.widgoo{border-top:4px solid var(--widgoo)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.step{border:1px solid var(--koonolo-line);border-radius:18px;background:#fff;padding:20px}
.step b{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border-radius:10px;font-size:.78rem;margin-bottom:12px}
.step:nth-child(1) b{background:var(--koonolo-soft);color:var(--koonolo-dark)}
.step:nth-child(2) b{background:var(--widgoo-soft);color:var(--widgoo-dark)}
.step:nth-child(3) b{background:var(--koonolo-dark);color:#fff}
.step h3{margin:0 0 8px;font-family:Manrope,sans-serif;font-size:.98rem}
.step p{margin:0;font-size:.87rem;color:var(--koonolo-muted);line-height:1.6}
.note{margin-top:14px;border:1px dashed var(--koonolo-line);border-radius:14px;background:#fff;padding:14px 16px;font-size:.82rem;color:var(--koonolo-muted);line-height:1.6}
.gateway-footer{margin-top:26px;border-top:1px solid var(--koonolo-line);padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.gateway-footer img{width:130px;height:auto}
.gateway-footer nav{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem}
.gateway-footer nav a{text-decoration:none;color:var(--koonolo-dark)}
.gateway-footer small{display:block;width:100%;color:var(--koonolo-muted);font-size:.75rem}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-widgoo{border-left:0;border-top:1px solid var(--koonolo-line)}.brands{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.hero-copy{padding:36px 24px 30px}.hero-widgoo{padding:28px 24px}.topbar-inner{min-height:64px}.brand-koonolo img{width:128px}}