:root{
  --bg:#03080a;
  --text:#f7faf8;
  --green:#77e74f;
  --gold:#f1c84f;
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  background:#03080a;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.site-header{
  position:fixed;
  z-index:100;
  left:0;right:0;top:0;
  height:82px;
  padding:0 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(3,8,10,.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(91,220,236,.18);
}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:54px;height:auto;aspect-ratio:1;object-fit:contain}
.brand span{display:flex;flex-direction:column}
.brand strong{font-size:.92rem;letter-spacing:.14em}
.brand small{font-size:.53rem;color:#ccd6d2}
.main-nav{display:flex;gap:28px;align-items:center}
.main-nav a{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#e9efec;
  white-space:nowrap;
}
.main-nav a:hover{color:#fff}
.main-nav .premium-nav-link{
  color:#ffe07a;
  border:1px solid rgba(241,200,79,.85);
  border-radius:999px;
  padding:10px 17px;
  box-shadow:0 0 30px rgba(241,200,79,.15);
}
.menu-toggle{display:none;background:none;border:0;padding:8px}
.menu-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px}
.premium-art{
  padding-top:82px;
  background:#03080a;
}
.premium-art img{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
}
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.hotspot{
  position:absolute;
  display:block;
  background:transparent;
  border-radius:20px;
}
.art-frame{position:relative;max-width:1536px;margin:0 auto}
.hotspot-concept{left:3%;top:17.0%;width:20%;height:4.2%}
.hotspot-story{left:25%;top:17.0%;width:17%;height:4.2%}
.hotspot-follow{left:3%;top:75.3%;width:19%;height:4.2%}
.hotspot-contact{left:32%;top:87.4%;width:17%;height:3.6%}
.hotspot:hover{outline:2px solid rgba(241,200,79,.45);background:rgba(241,200,79,.03)}
@media(max-width:1050px){
  .site-header{padding:0 18px}
  .main-nav{gap:14px}
  .main-nav a{font-size:.63rem}
}
@media(max-width:760px){
  .site-header{height:70px;padding:0 14px}
  .brand img{width:44px}
  .brand strong{font-size:.78rem}
  .brand small{font-size:.46rem}
  .menu-toggle{display:block}
  .main-nav{
    position:absolute;
    top:70px;left:14px;right:14px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px;
    background:rgba(4,9,12,.99);
    border:1px solid rgba(255,255,255,.12);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:13px 10px;font-size:.72rem}
  .main-nav .premium-nav-link{border-radius:8px}
  .premium-art{padding-top:70px}
}
@media(max-width:430px){
  .brand span{display:none}
}