*{box-sizing:border-box}
:root{
  --blue:#0072ce;
  --blue-dark:#003b7a;
  --blue-light:#dceeff;
  --yellow:#ffca05;
  --white:#fff;
  --black:#000;
}
html{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--blue-dark);background:#f6f8fb}
body{margin:0}
a{color:var(--blue);text-decoration:none}
img{max-width:100%;height:auto}
.site{position:relative;min-height:100vh;background:var(--white);overflow:hidden}
.topbar{position:relative;z-index:20;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--blue-light);background:rgba(255,255,255,.94)}
.logo{width:40px;height:40px;border-radius:50%;overflow:hidden;display:block}
.logo img{display:block;width:100%;height:100%;object-fit:cover}

.menu{position:relative}
.menu summary{list-style:none;width:44px;height:44px;padding:10px 7px;display:grid;align-content:center;gap:5px;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;height:3px;background:var(--blue-dark);border-radius:3px;transition:.2s}
.menu[open] summary span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu[open] summary span:nth-child(2){opacity:0}
.menu[open] summary span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.menu-panel{position:absolute;right:0;top:52px;width:min(86vw,330px);padding:9px;background:var(--white);border:1px solid var(--blue-light);border-radius:14px;box-shadow:0 16px 40px rgba(0,59,122,.22)}
.menu-panel a{display:block;padding:13px 14px;border-radius:9px;font-weight:750}
.menu-panel a:hover,.menu-panel a:focus-visible{background:var(--blue-light);outline:2px solid transparent}

.page-bg{position:absolute;z-index:0;pointer-events:none;object-fit:cover}
.page-bg--top{right:0;top:72px;width:68%;height:48%;object-position:left bottom}
.page-bg--bottom{left:0;bottom:0;width:72%;height:36%;object-position:right top}

.home-main,.detail-content{position:relative;z-index:2}
.home-main{padding:42px 20px 42px}
.home-intro{min-height:220px}
h1{font-size:clamp(2.5rem,10vw,4.9rem);line-height:.95;margin:0 0 18px;letter-spacing:-.045em}
.lead{font-size:2rem;line-height:2.1;color:var(--black);margin:0 0 26px}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{min-height:158px;border:1px solid var(--blue-light);border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 4px 14px rgba(0,43,92,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px 10px;gap:12px;font-size:1rem;transition:transform .18s,box-shadow .18s}
.card:hover,.card:focus-visible{transform:translateY(-3px);box-shadow:0 9px 24px rgba(0,43,92,.18);outline:3px solid var(--yellow);outline-offset:2px}
.card img{display:block;width:76px;height:58px;object-fit:cover;border-radius:9px;border: none}
.card--blue{background:var(--blue);color:var(--white);border-color:var(--blue)}
.card--blue img,.card--yellow img{border-color:var(--white)}
.card--light{background:var(--blue-light)}
.card--yellow{background:var(--yellow);color:var(--black);border-color:var(--yellow)}

.detail-content{padding:28px 22px 42px}
.back{display:inline-flex;align-items:center;font-weight:800;margin-bottom:30px}
.detail-title{font-size:clamp(2.5rem,10vw,4.5rem);margin-bottom:26px}
.detail-art{margin:0 -22px 30px;width:calc(100% + 44px)}
.detail-art img{display:block;width:100%;height: auto}
.prose p{font-size:1.12rem;line-height:1.58;color:var(--black);margin:0 0 1.35em}
.cta{display:block;background:var(--yellow);color:var(--black);text-align:center;padding:16px 20px;border-radius:999px;font-weight:850;margin-top:28px}
.cta:hover,.cta:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.bottom-wave{position:relative;z-index:1;display:block;width:100%;height:auto;margin-top:-1px}

@media(min-width:760px){
  body{padding:28px}
  .site{max-width:760px;margin:auto;border-radius:20px;box-shadow:0 12px 40px rgba(0,43,92,.14)}
  .topbar{padding:0 34px}
  .home-main{padding:60px 38px 48px}
  .home-intro{min-height:260px}
  .cards{gap:14px}
  .card{min-height:184px;font-size:1.15rem}
  .card img{width:92px;height:66px}
  .detail-content{padding:36px 48px 48px}
  .detail-art{margin:0 -48px 36px;width:calc(100% + 96px)}
  .page-bg--top{width:62%;height:54%}
  .page-bg--bottom{width:64%;height:39%}
}