:root{--lp-blue:#0A3D90;--lp-ink:#0b2240;--lp-bg:#F4F7FB;--lp-card:#fff;--lp-border:#e6ecf7}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--lp-ink);background:#fff}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--lp-border);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--lp-blue);font-weight:800;text-decoration:none}
.brand .mark{font-size:26px}
.menu a{margin-left:18px;text-decoration:none;color:var(--lp-blue);font-weight:650}
.menu a:hover{text-decoration:underline;text-underline-offset:6px}
.hero{background:var(--lp-bg);padding:54px 0;border-bottom:1px solid var(--lp-border);position:relative}
.kicker{letter-spacing:.18em;color:#5b718f;font-weight:700;font-size:12px}
h1.hero-title{font-size:clamp(32px,4.2vw,56px);line-height:1.04;color:var(--lp-blue);margin:12px 0 12px}
.hero p{max-width:820px;color:#2a3d59}
.cta{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap}
.btn{background:var(--lp-blue);color:#fff;border:none;border-radius:12px;padding:14px 18px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.btn.ghost{background:#e6f0ff;color:var(--lp-blue)}
.lines{position:absolute;left:0;right:0;height:80px;pointer-events:none;margin-top:22px;opacity:.95}
.wave{width:100%;height:90px}
.wave .stroke{fill:none;stroke:var(--lp-blue);stroke-width:2}
.cards{padding:38px 0;background:#fff}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--lp-card);border:1px solid var(--lp-border);border-radius:16px;padding:18px}
.badge{display:inline-block;background:#e6f0ff;color:var(--lp-blue);font-size:12px;padding:6px 10px;border-radius:999px;margin-bottom:8px}
.card h3{margin:6px 0 10px 0}
.card p{color:#44556f}
.card .link{display:inline-flex;align-items:center;gap:8px;color:var(--lp-blue);font-weight:700;text-decoration:none}
.info{background:#eef5ff;border:1px solid #d7e6ff;margin:24px 0;padding:14px;border-radius:12px;color:#2a3d59}
footer#canal{border-top:1px solid var(--lp-border);margin-top:28px;padding:26px 0;color:#2a3d59;background:#fff}
footer h4{color:var(--lp-blue);margin:0 0 10px 0}
footer a{color:var(--lp-blue);text-decoration:none}
footer p{margin:6px 0}
.page{padding:28px 0}
.page-hero{background:var(--lp-bg);border:1px solid var(--lp-border);border-radius:16px;padding:24px;margin-bottom:20px}
.page h1{color:var(--lp-blue);margin:0 0 10px 0}
/* timeline */
.timeline .lane{position:relative;border-bottom:3px solid var(--lp-blue);padding:16px 0 26px;margin:8px 0}
.timeline .lane::before{content:attr(data-label);position:absolute;left:0;top:-10px;color:var(--lp-blue);font-weight:800}
.pin{display:inline-block;margin:0 18px;cursor:pointer;position:relative}
.pin i{width:14px;height:14px;display:inline-block;border-radius:50%;background:#fff;border:3px solid var(--lp-blue);box-shadow:0 0 0 4px #e6f0ff}
.pin .meta{position:absolute;top:22px;left:-90px;width:200px;font-size:12px;color:#44556f}
dialog.modal{border:none;border-radius:14px;padding:0;max-width:740px;width:95%}
dialog .wrap{padding:16px}
dialog::backdrop{background:rgba(10,61,144,.4)}
.close{float:right;cursor:pointer}
.embed{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;margin:10px 0}
.small{font-size:12px;color:#5b718f}