@import "../styles/tokens.css";

*{box-sizing:border-box}
body{margin:0;background:#f5f7fa;color:#173f5a;font:16px/1.5 Inter,ui-sans-serif,system-ui,sans-serif}
a:focus-visible{outline:3px solid #ffbf36;outline-offset:4px}
.menu-header{background:#005b92;color:#fff}
.menu-header>div,.menu-main{width:min(1200px,calc(100% - 64px));margin:auto}
.menu-header>div{height:72px;display:flex;align-items:center;justify-content:space-between}
.menu-brand{display:flex;align-items:center;gap:11px;color:#fff;font-size:20px;font-weight:800;text-decoration:none}
.menu-brand i{display:grid;width:38px;height:38px;padding:5px;place-items:center;border-radius:8px;background:#0874af}
.menu-brand img{width:100%;height:100%;filter:brightness(0) invert(1)}
.menu-header nav{display:flex;gap:4px}
.menu-header nav a{padding:9px 12px;border-radius:6px;color:#fff;font-size:14px;font-weight:650;text-decoration:none}
.menu-header nav a:hover{background:rgba(255,255,255,.15)}
.menu-main{padding:48px 0 82px}
.crumb{display:inline-block;margin-bottom:24px;color:#0075ad;font-weight:700;text-decoration:none}
.crumb:hover{text-decoration:underline}
.menu-hero{position:relative;overflow:hidden;padding:42px;border-radius:12px;background:linear-gradient(125deg,#005b92,#0a91bf);color:#fff}
.menu-hero:after{position:absolute;right:-62px;bottom:-80px;width:250px;height:250px;border:42px solid rgba(255,190,43,.86);border-radius:50%;content:""}
.menu-hero p{position:relative;z-index:1;max-width:680px;margin:0;color:#d9f5ff}
.menu-hero p:first-child{margin-bottom:8px;color:#ffcc55;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.menu-hero h1{position:relative;z-index:1;margin:0 0 13px;font-size:44px;letter-spacing:-.045em}
.menu-section{margin-top:48px}
.menu-section h2{margin:0 0 8px;font-size:32px;letter-spacing:-.035em}
.menu-section>p{margin:0 0 23px;color:#607787}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:17px}
.menu-card{position:relative;display:flex;min-height:205px;padding:24px;flex-direction:column;justify-content:flex-end;overflow:hidden;border:1px solid #d9e7ed;border-radius:10px;background:#fff;color:#173f5a;box-shadow:0 8px 18px rgba(20,60,84,.08);text-decoration:none;transition:transform .22s,box-shadow .22s,background .22s}
.menu-card:before{position:absolute;top:20px;left:24px;width:46px;height:46px;border-radius:50%;background:#dff5fa;content:""}
.menu-card:after{position:absolute;right:-47px;bottom:-54px;width:150px;height:150px;border:26px solid rgba(10,165,199,.18);border-radius:50%;content:"";transition:transform .3s}
.menu-card:hover,.menu-card:focus-visible{background:#effbff;box-shadow:0 16px 28px rgba(20,60,84,.16);transform:translateY(-5px)}
.menu-card:hover:after,.menu-card:focus-visible:after{transform:scale(1.14)}
.menu-card small{position:relative;z-index:1;margin-bottom:7px;color:#0075ad;font-weight:750}
.menu-card strong{position:relative;z-index:1;font-size:25px;letter-spacing:-.03em}
.menu-card span{position:relative;z-index:1;margin-top:12px;color:#607787;font-size:14px}
.menu-card--disabled{cursor:not-allowed;filter:grayscale(.28);opacity:.55}
.menu-card--disabled:before{background:#e8edf0}
.menu-card--disabled:after{border-color:rgba(96,119,135,.18)}
.menu-footer{padding:25px;border-top:1px solid #d9e7ed;color:#607787;text-align:center;font-size:13px}
@media(max-width:800px){.menu-header>div,.menu-main{width:calc(100% - 40px)}.menu-header nav a{padding:7px}.menu-hero{padding:30px}.menu-hero h1{font-size:36px}}