/* Reusable glassmorphism surfaces and the stage-5 interface layer */
.glass-panel { border: 1px solid var(--glass-border); background: var(--glass-bg); box-shadow: var(--glass-shadow), inset 0 1px 0 rgb(255 255 255 / 9%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%); backdrop-filter: blur(var(--glass-blur)) saturate(135%); }
.glass-panel::selection { color: #031629; background: #a8eaff; }
.glass-pill { border: 1px solid rgb(145 220 255 / 30%); border-radius: 999px; background: rgb(5 39 70 / 47%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); }
.site-header { position: absolute; z-index: 20; top: 1.15rem; left: 50%; display: grid; grid-template-columns: minmax(12rem, 1fr) auto auto; align-items: center; gap: clamp(.8rem, 1.5vw, 1.6rem); width: min(calc(100% - 3rem), 88rem); margin: 0; padding: .7rem 1rem; border-radius: 1.25rem; transform: translateX(-50%); }
.site-header::after { position: absolute; inset: 0; border-radius: inherit; content: ""; pointer-events: none; background: linear-gradient(105deg, rgb(93 209 255 / 8%), transparent 36%, rgb(255 255 255 / 4%)); }
.brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .68rem; width: fit-content; text-decoration: none; }
.brand__mark { color: var(--color-sky); font-size: 2.55rem; line-height: .85; text-shadow: 0 0 18px rgb(66 216 255 / 60%); }
.brand__text { display: grid; line-height: 1.2; }
.brand__name { font-size: .98rem; font-weight: 760; letter-spacing: .12em; }
.brand__tagline { margin-top: .24rem; color: var(--color-muted); font-size: .65rem; letter-spacing: .075em; }
.primary-nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: clamp(.45rem, 1.2vw, 1.3rem); }
.primary-nav a { position: relative; padding: .5rem .25rem; color: var(--color-muted); font-size: .8rem; text-decoration: none; white-space: nowrap; transition: color var(--motion-fast) var(--ease-out); }
.primary-nav a::after { position: absolute; right: 28%; bottom: .13rem; left: 28%; height: 2px; border-radius: 9px; content: ""; background: var(--color-cyan); box-shadow: 0 0 12px rgb(66 216 255 / 80%); transform: scaleX(0); transform-origin: center; transition: transform var(--motion-fast) var(--ease-out); }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: #fff; }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.language-nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: .08rem; padding: .2rem; }
.language-nav button { display: grid; min-width: 2.2rem; min-height: 2rem; place-items: center; padding: .28rem .4rem; border: 1px solid transparent; border-radius: 999px; color: var(--color-muted); background: transparent; font: inherit; font-size: .73rem; line-height: 1; cursor: pointer; transition: color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
.language-nav button:hover { color: #fff; background: rgb(112 220 255 / 10%); }
.language-nav button:focus-visible { outline: 2px solid #d5f6ff; outline-offset: 2px; }
.language-nav button[aria-current="true"] { color: white; border: 1px solid rgb(112 220 255 / 48%); border-radius: 999px; background: linear-gradient(135deg, rgb(25 148 210 / 48%), rgb(10 69 116 / 42%)); box-shadow: 0 0 15px rgb(39 187 255 / 15%); }
.side-nav { position: fixed; z-index: 90; top: 50%; left: clamp(1rem, 1.7vw, 1.8rem); display: flex; flex-direction: column; gap: .2rem; width: 5.35rem; max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: .48rem; border-radius: 1.1rem; transform: translateY(-50%); }
.side-nav__link { display: flex; min-height: 4.2rem; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: .55rem .25rem; border: 1px solid transparent; border-radius: .78rem; color: #d7eaf6; font-size: .68rem; text-align: center; text-decoration: none; transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
.side-nav__link svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; color: #9ce6ff; }
.side-nav__link:hover { border-color: rgb(130 223 255 / 34%); background: rgb(77 188 242 / 13%); color: white; transform: translateY(-1px); }
.side-nav__link.is-current { border-color: rgb(135 225 255 / 45%); background: linear-gradient(145deg, rgb(78 189 247 / 28%), rgb(12 87 139 / 19%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 0 18px rgb(47 187 255 / 12%); color: white; }
.side-nav__link.is-current svg { filter: drop-shadow(0 0 5px rgb(88 218 255 / 75%)); }
.side-nav__link--quiet { color: #a9c6d9; }
.city-card { position: absolute; z-index: 8; top: 20%; right: clamp(1.1rem, 2.5vw, 2.7rem); width: clamp(10.5rem, 12.2vw, 13.25rem); overflow: hidden; border-radius: 1.2rem; background: linear-gradient(150deg, rgb(123 203 242 / 31%), rgb(6 41 73 / 70%)); transition: transform 240ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.city-card:hover { border-color: var(--glass-border-bright); box-shadow: var(--glass-shadow), var(--glow-shadow); transform: translateY(-3px); }
.city-card__image { min-height: 5.7rem; background-image: linear-gradient(180deg, rgb(3 26 48 / 0%), rgb(3 26 48 / 10%)), url("../assets/hero-background.png"); background-size: auto, 310% 210%; background-position: center, 17% 69%; }
.city-card__content { padding: .8rem .9rem .95rem; }
.eyebrow { margin: 0 0 .32rem; color: #a5e8ff; font-size: .56rem; font-weight: 750; letter-spacing: .16em; }
.eyebrow span { color: #d7f5ff; }
.city-card h2 { margin: 0; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 1.38rem; font-weight: 500; line-height: 1.08; }
.city-card__subtitle { margin: .2rem 0 .72rem; color: #d7ebf8; font-size: .72rem; }
.city-card__description { margin: 0 0 .78rem; padding-top: .55rem; border-top: 1px solid rgb(221 246 255 / 15%); color: #d1e3ef; font-size: .7rem; line-height: 1.55; }
.text-link { display: flex; align-items: center; justify-content: space-between; gap: .7rem; color: #9de7ff; font-size: .71rem; text-decoration: none; }
.text-link span { font-size: 1.05rem; transition: transform var(--motion-fast) var(--ease-out); }
.text-link:hover span { transform: translate(2px, -2px); }
.quote-card { position: absolute; z-index: 7; right: clamp(1.1rem, 2.5vw, 2.7rem); bottom: 18%; width: clamp(10.5rem, 12.4vw, 13.3rem); margin: 0; padding: .9rem 1rem 1rem; border-radius: 1.1rem; background: linear-gradient(145deg, rgb(75 145 191 / 34%), rgb(6 35 64 / 67%)); }
.quote-card__mark { display: block; height: 1rem; color: #8ee4ff; font-family: Georgia, serif; font-size: 2rem; line-height: .9; }
.quote-card p { margin: .55rem 0 .75rem; color: #f2f8fc; font-family: Georgia, "Times New Roman", serif; font-size: .83rem; font-style: italic; line-height: 1.4; }
.quote-card cite { color: #9dc7de; font-size: .53rem; font-style: normal; font-weight: 700; letter-spacing: .12em; }
.hero-scroll-hint { position: absolute; z-index: 4; bottom: 1.65rem; left: 50%; display: flex; flex-direction: column; align-items: center; gap: .4rem; color: #d8f1ff; font-size: .65rem; letter-spacing: .04em; transform: translateX(-50%); opacity: .9; }
.hero-scroll-hint__mouse { display: grid; width: 1.05rem; height: 1.65rem; place-items: start center; padding-top: .28rem; border: 1px solid rgb(213 244 255 / 76%); border-radius: 999px; }
.hero-scroll-hint__mouse span { width: 2px; height: .35rem; border-radius: 999px; background: #dff7ff; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-panel { background: var(--glass-bg-strong); } }