.menu-brand { font-size: 14px; color: #477b8f; }
header { margin: 44px 0 32px; }
h1 { font-size: clamp(30px, 5vw, 50px); letter-spacing: -1px; overflow-wrap: anywhere; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1000px; margin: auto; }
.overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.menu-card { display: flex; align-items: center; gap: 18px; min-height: 112px; padding: 23px; border: 3px solid white; border-radius: 24px; background: #ffffffdc; box-shadow: 0 12px 30px #24567e14; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; }
.menu-card:hover { transform: translateY(-3px); background: white; box-shadow: 0 18px 35px #24567e22; }
.menu-icon { display: grid; place-items: center; width: 54px; height: 54px; flex-shrink: 0; border-radius: 17px; background: #e9edff; color: #5369d7; font-size: 29px; font-weight: bold; }
.menu-label { font-size: 19px; font-weight: bold; line-height: 1.35; overflow-wrap: anywhere; }
.menu-arrow { margin-left: auto; font-size: 24px; color: #5369d7; }
.menu-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.menu-group h2 { margin: 0 0 20px; text-align: center; }
.menu-group .menu-grid { grid-template-columns: 1fr; gap: 14px; }
.menu-group .menu-card { padding: 16px; min-height: 100px; border-width: 2px; background: #eef5ff; box-shadow: none; }
.menu-group .menu-label { font-size: 17px; }
.menu-group .menu-icon { width: 42px; height: 42px; font-size: 24px; }
.menu-podcast { max-width: 1000px; margin: 26px auto 0; }
summary { cursor: pointer; font-weight: bold; }
summary:focus-visible { outline: 3px solid #5369d7; outline-offset: 4px; }
audio { display: block; width: 100%; max-width: 500px; margin-top: 18px; }
@media (max-width: 950px) { .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .menu-groups { grid-template-columns: 1fr; } .menu-group .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .menu-group .menu-card { flex-wrap: wrap; gap: 10px; } }
@media (max-width: 600px) { nav { flex-wrap: wrap; } .menu-brand { font-size: 12px; } header { margin-top: 30px; } .menu-grid, .overview-grid, .menu-group .menu-grid { grid-template-columns: 1fr; } .menu-card { min-height: 95px; padding: 17px; gap: 14px; } .menu-label { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .menu-card { transition: none; } .menu-card:hover { transform: none; } }