.topbar {
        	position: sticky;
        	top: 0;
        	z-index: 20;
        	background: rgba(255, 255, 255, .88);
        	backdrop-filter: blur(16px);
        	border-bottom: 1px solid var(--line)
        }
        
        .nav {
        	height: 76px;
        	display: flex;
        	align-items: center;
        	gap: 22px
        }
        
        .nav-actions {
        	margin-left: auto;
        	display: flex;
        	align-items: center;
        	justify-content: flex-end;
        	gap: 14px;
        	flex-wrap: nowrap
        }
        
        .brand {
        	display: flex;
        	align-items: center;
        	gap: 12px;
        	font-weight: 900;
        	font-size: 1.12rem
        }
        
        .brand-logo {
        	width: 58px;
        	height: 58px;
        	object-fit: contain;
        	filter: drop-shadow(0 10px 18px rgba(8, 127, 155, .18))
        }
        
        .logo {
        	width: 42px;
        	height: 42px;
        	border-radius: 14px;
        	background: linear-gradient(135deg, var(--blue), #7de9f7);
        	display: grid;
        	place-items: center;
        	color: #fff;
        	font-weight: 900;
        	box-shadow: 0 12px 30px rgba(34, 199, 223, .28)
        }
		
		.cta {
        	display: flex;
        	gap: 10px;
        	align-items: center
        }
		
		.header-btn-qr {
    		display: inline-flex;
    		align-items: center;
    		gap: 8px;
    		padding: 10px 16px;
    		border-radius: 999px;
    		background: linear-gradient(135deg, var(--blue-deep), var(--blue-dark));
    		color: #ffffff;
    		border: 1px solid rgba(34,199,223,.32);
    		font-weight: 700;
    		text-decoration: none;
    		line-height: 1;
    		transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    	}
    
    	.header-btn-qr:hover {
    		background: linear-gradient(135deg, var(--blue-dark), var(--blue));
    		color: #ffffff;
    		transform: translateY(-1px);
    		box-shadow: 0 10px 22px rgba(8, 127, 155, .25);
    	}
    
    	.header-btn-qr .header-btn-icon {
    		width: 18px;
    		height: 18px;
    		fill: currentColor;
    		flex: 0 0 auto;
    	}
		
		.header-btn-login {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;

			padding: 10px 18px;
			min-height: 46px;

			background: #ffffff;
			color: #087f9b;

			border: 1px solid rgba(34, 199, 223, .35);
			border-radius: 999px;

			font-weight: 800;
			text-decoration: none;
			line-height: 1;

			box-shadow: 0 8px 22px rgba(8, 127, 155, .06);
			transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
		}

		.header-btn-login:hover {
			background: #ffffff;
			color: #075f76;
			border-color: rgba(8, 127, 155, .45);
			transform: translateY(-1px);
			box-shadow: 0 12px 28px rgba(8, 127, 155, .14);
		}

		.header-btn-login .header-btn-icon {
			width: 18px;
			height: 18px;
			fill: currentColor;
			color: currentColor;
			flex: 0 0 auto;
		}

		.header-btn-login .header-btn-icon path {
			fill: currentColor;
		}

		.header-btn-login .header-btn-text {
			color: currentColor;
		}
		
		@media(max-width:900px) {
        	.nav {
        		height: 68px
        	}
        	.nav-actions {
        		gap: 8px
        	}
        	.btn-ghost {
        		display: none
        	}
        	.brand span {
        		display: none
        	}
        	.brand-logo {
        		width: 48px;
        		height: 48px
        	}
        	.header-btn-qr {
        		padding: 10px 13px
        	}
        	.header-btn-qr span {
        		display: none
        	}
			.cta {
				margin-left: 0;
				width: 100%;
				justify-content: flex-start
			}
			.header-btn-login {
				width: 46px;
				height: 46px;
				min-width: 46px;
				padding: 0;
				gap: 0;
				border-radius: 999px;
				background: #ffffff;
				color: #087f9b;
			}

			.header-btn-login .header-btn-text {
				display: none;
			}

			.header-btn-login .header-btn-icon {
				width: 19px;
				height: 19px;
			}
        }