:root{
  --navy: #0B3C5D;
  --cobalt: #1568A6;
  --cobalt-dark: #0F4E80;
  --sky: #EAF3FA;
  --white: #FFFFFF;
  --ink: #10202C;
  --slate: #52697A;
  --line: #D3E3EE;
}
*{ box-sizing: border-box; }
body{
  margin:0; font-family:'Public Sans', sans-serif; color: var(--ink);
  background: linear-gradient(180deg, var(--sky) 0%, #FFFFFF 340px);
  min-height:100vh; display:flex; justify-content:center; padding: 0 0 60px;
}
.page{ width:100%; max-width:480px; }

.banner-slot{ width:100%; background: var(--navy); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.banner-slot img{ width:100%; max-width:728px; height:auto; aspect-ratio: 728 / 90; object-fit:cover; display:block; }
.banner-hint{ position:absolute; bottom:6px; right:10px; font-size:10px; letter-spacing:.04em; color:rgba(255,255,255,0.55); pointer-events:none; }

.header{ padding: 28px 28px 20px; text-align:center; position:relative; }
.seal{
  width:76px; height:76px; border-radius:50%; margin: -60px auto 14px;
  background: var(--white); border: 3px solid var(--cobalt);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(11,60,93,0.18); position:relative; z-index:2;
}
.seal span{ font-family:'Source Serif 4', serif; font-weight:700; font-size:20px; color: var(--navy); letter-spacing: 0.02em; }
.seal-img{ width:100%; height:100%; object-fit:contain; border-radius:50%; padding:6px; }
.header h1{ font-family:'Source Serif 4', serif; font-weight:700; font-size: 26px; line-height:1.25; margin: 0 0 6px; color: var(--navy); }
.header p{ margin:0; font-size:14px; color: var(--slate); font-weight:500; }

.ribbon{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:6px 14px;
  background: var(--sky); border: 1px solid var(--line); border-radius:999px;
  font-size:12px; font-weight:600; color: var(--cobalt-dark);
}
.ribbon svg{ width:13px; height:13px; }

.links{ padding: 8px 24px 0; display:flex; flex-direction:column; gap:12px; }
.link-btn{
  display:flex; align-items:center; gap:14px; background: var(--white);
  border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px;
  text-decoration:none; color: var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow: 0 1px 2px rgba(11,60,93,0.04);
}
.link-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11,60,93,0.12); border-color: var(--cobalt); }
.link-btn:focus-visible{ outline: 3px solid var(--cobalt); outline-offset: 2px; }
.link-btn:active{ transform: translateY(0); }

.link-icon{ flex:0 0 auto; width:42px; height:42px; border-radius:11px; background: var(--sky); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.link-icon svg{ width:22px; height:22px; stroke: var(--cobalt-dark); }

.link-text{ flex:1; min-width:0; }
.link-text .t{ display:block; font-weight:700; font-size:15px; color: var(--navy); }
.link-text .d{ display:block; font-size:12.5px; color: var(--slate); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.chevron{ flex:0 0 auto; width:9px; height:9px; border-top:2px solid var(--slate); border-right:2px solid var(--slate); transform: rotate(45deg); opacity:.55; }

.link-btn.primary{ background: var(--cobalt); border-color: var(--cobalt); }
.link-btn.primary .link-icon{ background: rgba(255,255,255,0.16); }
.link-btn.primary .link-icon svg{ stroke: var(--white); }
.link-btn.primary .t{ color: var(--white); }
.link-btn.primary .d{ color: rgba(255,255,255,0.78); }
.link-btn.primary .chevron{ border-color: rgba(255,255,255,0.85); }

.section-label{ padding: 22px 28px 4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--slate); }

.social-row{ display:flex; justify-content:center; gap:14px; padding: 26px 24px 10px; }
.social-icon{
  width:44px; height:44px; border-radius:50%; background: var(--white);
  border: 1.5px solid var(--line); display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition: transform .16s ease, border-color .16s ease;
}
.social-icon svg{ width:19px; height:19px; stroke: var(--cobalt-dark); }
.social-icon:hover{ transform: translateY(-2px); border-color: var(--cobalt); }

footer{ text-align:center; padding: 10px 24px 0; font-size:11.5px; color: var(--slate); line-height:1.6; }
footer strong{ color: var(--navy); }

@media (max-width:420px){
  .header h1{ font-size:22px; }
  .links{ padding-left:18px; padding-right:18px; }
}