.app-shell { min-height: 100vh; }
.top-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: var(--top-bar-height); padding: .75rem max(1rem, env(safe-area-inset-left)); border-bottom: 1px solid rgb(185 155 82 / 14%); background: rgb(4 14 12 / 82%); backdrop-filter: blur(18px) saturate(120%); }
.brand { display: inline-flex; align-items: center; gap: .72rem; color: var(--color-text); text-decoration: none; }
.brand__seal { display: grid; place-items: center; width: 2.55rem; aspect-ratio: 1; border: 1px solid var(--color-gold); border-radius: .72rem; color: var(--color-gold-bright); background: linear-gradient(145deg, rgb(185 155 82 / 13%), transparent); box-shadow: inset 0 0 0 3px rgb(7 19 17 / 75%), var(--shadow-glow); font: 700 1.18rem var(--font-display); }
.brand > span:last-child { display: grid; line-height: 1.15; }
.brand strong { font: 700 1rem var(--font-display); letter-spacing: .14em; }
.brand small { margin-top: .28rem; color: var(--color-muted); font-size: .66rem; letter-spacing: .08em; }
.local-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .62rem; border: 1px solid rgb(63 116 104 / 50%); border-radius: 999px; color: #add1c8; background: rgb(21 54 47 / 55%); font-size: .7rem; white-space: nowrap; }
.local-badge::before { content: ""; width: .42rem; aspect-ratio: 1; border-radius: 50%; background: #77b5a7; box-shadow: 0 0 .7rem #77b5a7; }
.main-content { width: min(100%, var(--content-width)); min-height: calc(100vh - var(--top-bar-height)); margin: 0 auto; padding: 1.2rem 1rem calc(var(--bottom-nav-height) + 2rem + env(safe-area-inset-bottom)); }
.bottom-nav { position: fixed; inset: auto 0 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); min-height: var(--bottom-nav-height); padding: .4rem max(.6rem, env(safe-area-inset-right)) calc(.35rem + env(safe-area-inset-bottom)) max(.6rem, env(safe-area-inset-left)); border-top: 1px solid rgb(185 155 82 / 18%); background: rgb(4 14 12 / 92%); backdrop-filter: blur(20px) saturate(120%); }
.bottom-nav__link { position: relative; display: grid; place-items: center; align-content: center; gap: .18rem; min-height: 3.7rem; border-radius: .9rem; color: var(--color-muted); text-decoration: none; font-size: .68rem; }
.bottom-nav__icon { display: grid; place-items: center; width: 1.65rem; aspect-ratio: 1; border-radius: .42rem; color: currentColor; font: 700 .83rem var(--font-display); }
.bottom-nav__link.is-active { color: var(--color-gold-bright); background: linear-gradient(to bottom, rgb(185 155 82 / 10%), transparent); }
.bottom-nav__link.is-active::before { content: ""; position: absolute; top: -.42rem; width: 2rem; height: 2px; background: var(--color-gold-bright); box-shadow: 0 0 .8rem var(--color-gold); }
.home-view { display: grid; justify-items: center; gap: 1.15rem; padding: clamp(1.5rem, 6vw, 4rem) 0 1rem; text-align: center; }
.home-orbit { position: relative; display: grid; place-items: center; width: min(64vw, 17rem); aspect-ratio: 1; margin-bottom: .4rem; border: 1px solid rgb(185 155 82 / 32%); border-radius: 50%; background: radial-gradient(circle, rgb(37 74 66 / 36%), rgb(7 19 17 / 30%) 48%, transparent 70%); box-shadow: inset 0 0 4rem rgb(185 155 82 / 7%), 0 0 4rem rgb(37 74 66 / 22%); }
.home-orbit::before, .home-orbit::after { content: ""; position: absolute; border: 1px solid rgb(185 155 82 / 18%); border-radius: 50%; }
.home-orbit::before { inset: 10%; border-style: dashed; animation: orbit 28s linear infinite; }
.home-orbit::after { inset: 24%; box-shadow: 0 0 1.4rem rgb(185 155 82 / 12%); }
.home-orbit b { z-index: 1; display: grid; place-items: center; width: 38%; aspect-ratio: 1; border: 1px solid var(--color-gold); border-radius: 50%; color: var(--color-gold-bright); background: rgb(7 19 17 / 85%); box-shadow: var(--shadow-glow); font: 700 clamp(2rem, 10vw, 3.5rem) var(--font-display); }
.home-orbit span { position: absolute; z-index: 1; color: var(--color-gold); font-size: 1.25rem; }
.home-orbit span:first-child { top: 5%; }
.home-orbit span:nth-child(2) { bottom: 5%; }
.home-kicker { margin: 0; color: var(--color-muted); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; }
.home-view h1 { margin: 0; font: 600 clamp(2.65rem, 13vw, 5rem)/1.1 var(--font-display); letter-spacing: .08em; }
.home-view h1 em { color: var(--color-gold-bright); font-style: normal; text-shadow: 0 0 2rem rgb(185 155 82 / 18%); }
.home-lead { max-width: 39rem; margin: 0; color: #b9c8c2; font-size: .94rem; }
.home-features { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.home-features span { padding: .35rem .62rem; border: 1px solid rgb(63 116 104 / 35%); border-radius: 999px; color: #a9c5bd; background: rgb(21 54 47 / 35%); font-size: .7rem; }
.culture-note { width: min(100%, 39rem); padding: .9rem 1rem; border-left: 2px solid var(--color-cinnabar); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--color-muted); background: rgb(169 69 55 / 7%); text-align: left; }
.culture-note strong { color: #d9a096; font-size: .78rem; }
.culture-note p { margin: .25rem 0 0; font-size: .74rem; }
.placeholder-view { display: grid; place-items: center; align-content: center; min-height: 60vh; text-align: center; }
.placeholder-view > p:first-child { color: var(--color-muted); letter-spacing: .2em; }
.placeholder-view h1 { font: 600 2.5rem var(--font-display); color: var(--color-gold-bright); }
.text-link { text-underline-offset: .3em; }
@keyframes orbit { to { transform: rotate(1turn); } }