.menu-icon { display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 22px; cursor: pointer; padding: 4px; margin-top: 5px; border-radius: 6px; background-color: rgba(31,43,58,0.6); backdrop-filter: blur(6px); z-index: 10000; transition: background-color 0.3s ease, transform 0.2s ease; }
.menu-icon span { display: block; height: 3px; width: 100%; background: #F5F5F5; border-radius: 2px; transition: all 0.4s ease; }
.menu-icon:hover { background-color: rgba(212,175,55,0.8); transform: scale(1.1); }
.menu-icon.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.menu-icon.active span:nth-child(2) { opacity: 0; }
.menu-icon.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15,23,42,0.6); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.4s ease; z-index: 9998; }
.overlay.active { opacity: 1; visibility: visible; }
.mobile-menu { position: fixed; top: 0; right: -100%; width: 80%; max-width: 320px; height: 100vh; background-color: #1F2B3A; box-shadow: -4px 0 15px rgba(0,0,0,0.4); transition: right 0.6s cubic-bezier(0.77,0,0.175,1); z-index: 9999; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; }
.mobile-menu.active { right: 0; }
.mobile-menu ul { list-style: none; margin-top: 40px; display: flex; flex-direction: column; gap: 25px; }
.mobile-menu a { color: #F5F5F5; text-decoration: none; font-size: 1.3rem; font-weight: 500; opacity: 0; transform: translateX(20px) scale(0.95); transition: all 0.4s cubic-bezier(0.77,0,0.175,1); }
.mobile-menu.active ul li:nth-child(1) a { transition-delay: 0.1s; opacity: 1; transform: translateX(0) scale(1); }
.mobile-menu.active ul li:nth-child(2) a { transition-delay: 0.2s; opacity: 1; transform: translateX(0) scale(1); }
.mobile-menu.active ul li:nth-child(3) a { transition-delay: 0.3s; opacity: 1; transform: translateX(0) scale(1); }
.mobile-menu.active ul li:nth-child(4) a { transition-delay: 0.4s; opacity: 1; transform: translateX(0) scale(1); }
.mobile-menu.closing a { opacity: 0; transform: translateX(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.77,0,0.175,1); }
.mobile-menu.active ul li a { opacity: 1; transform: translateX(0) scale(1); transition-delay: 0.1s; }
@media (max-width: 768px) { .menu-icon { display: flex; } nav ul { display: none; } }
@media (min-width: 769px) { .mobile-menu, .overlay, .menu-icon { display: none; } }
.announcement { position: fixed; left: 20px; bottom: 20px; width: clamp(260px,36vw,380px); max-width: 90%; background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(31,43,58,0.95)); color: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(15,23,42,0.6); padding: 14px 14px 12px 14px; display: flex; gap: 12px; align-items: center; transform: translateX(-120%) translateY(0) rotate(-1deg); opacity: 0; z-index: 10001; transition: transform 0.7s cubic-bezier(.18,.9,.4,1), opacity 0.5s ease; pointer-events: auto; border: 1px solid rgba(212,175,55,0.12); backdrop-filter: blur(6px); }
.announcement.show { transform: translateX(0) translateY(0) rotate(0); opacity: 1; }
.announcement .badge { display: inline-block; font-size: 0.8rem; font-weight: 700; color: #fff; background: #D4AF37; padding: 4px 10px; border-radius: 30px; margin-bottom: 10px; letter-spacing: 0.5px; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.announcement .content { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.announcement .content .title { font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: -0.2px; }
.announcement .content .subtitle { font-size: 0.87rem; opacity: 0.9; }
.announcement .cta { margin-left: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.announcement .cta .btn { background: linear-gradient(90deg,#D4AF37,#C79C28); color: #08121A; padding: 8px 12px; border-radius: 10px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 20px rgba(20,30,40,0.3); transform-origin: center; animation: pulse 2.2s infinite ease-in-out; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
.announcement .small { font-size: 0.75rem; opacity: 0.8; }
.announcement .close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: transparent; color: #fff; font-weight: 700; border: none; cursor: pointer; opacity: 0.9; }
.announcement .close:hover { opacity: 1; transform: scale(1.05); }
.announcement .dismiss { font-size: 0.72rem; opacity: 0.85; text-decoration: underline; cursor: pointer; background: none; border: none; color: rgba(255,255,255,0.9); }
.announcement.hide { transform: translateX(-120%) translateY(20px) rotate(-3deg); opacity: 0; transition: transform 0.5s cubic-bezier(.18,.9,.4,1), opacity 0.4s ease; pointer-events: none; }
@media (max-width: 480px) { .announcement { left: 12px; bottom: 14px; width: calc(100% - 24px); padding: 12px; } .announcement .badge { display: none; } .announcement { padding-right: 46px; } }