:root{
  --blue:#0d47a1;
  --yellow:#ffd600;
  --ink:#111827;
  --paper:#ffffff;
  --muted:#6b7280;
  --sky:#e0f2fe;
  --mint:#dcfce7;
  --rose:#ffe4e6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:20}
.nav{display:flex;align-items:center;justify-content:flex-start;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900}
.brand img{height:74px;width:auto;border-radius:10px}
.tagline{text-align:center;font-style:italic;font-family:'Georgia',serif;font-size:20px;margin-top:8px}
.hero{background:var(--yellow);padding:28px 0 12px}
.hero h1{margin:0 0 8px;font-size:clamp(26px,4vw,40px)}
.hero p{margin:0 0 10px}
.kicker{letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:#374151;font-weight:800}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.actions.bottom{margin-top:18px;justify-content:flex-start}
.button{padding:10px 16px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.section{padding:32px 0}
.section.sky{background:var(--sky)}
.section.mint{background:var(--mint)}
.section.rose{background:var(--rose)}
.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:#fff;border:1px solid #eee;border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.05);padding:18px}
.card h2,.card h3{margin:0 0 8px}
.list{margin:0 0 0 20px;line-height:1.8;font-size:18px}
.footer{border-top:1px solid #eee;padding:24px 0;color:var(--muted)}
.helper{font-size:13px;color:var(--muted)}
hr{border:none;border-top:1px solid #eee;margin:20px 0}
/* watermark */
.watermark{
  position:fixed;
  inset:0;
  background-image:url('assets/logo-uploaded.jpeg');
  background-repeat:no-repeat;
  background-position:center 30%;
  background-size:min(70vw, 700px);
  opacity:0.06;
  pointer-events:none;
  z-index:0;
}
main, section, header, footer, .container{position:relative;z-index:1}
@media (max-width:640px){
  .actions.bottom .button{flex:1 1 calc(50% - 6px)}
  .brand img{height:64px}
}