*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#fff;font-family:"Times New Roman",Georgia,serif}
.site{width:100%}
.hero{
  min-height:625px;
  background:#000;
  color:#eee;
  padding:0;
}
.layout{
  width:min(1120px,100%);
  margin:0 auto;
  min-height:625px;
  display:grid;
  grid-template-columns:540px 500px;
  gap:45px;
  align-items:start;
  padding:0 20px;
}
.left{padding-top:0}
.logo{
  display:block;
  width:440px;
  max-width:100%;
  height:auto;
  margin:0 auto 12px;
}
.right{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:20px;
}
.right img{
  width:480px;
  max-width:100%;
  height:auto;
  display:block;
}

.marquee{
  width:460px;
  max-width:100%;
  margin:0 auto 12px;
  height:68px;
  overflow:hidden;
  display:flex;
  align-items:center;
  white-space:nowrap;
  background:#050505;
  border:2px solid #a8a8a8;
  box-shadow:inset 0 0 10px rgba(255,255,255,.06);
}
.marquee-track{
  display:inline-flex;
  align-items:center;
  gap:28px;
  min-width:max-content;
  padding-left:10px;
  font-size:21px;
  font-weight:bold;
  letter-spacing:1.5px;
  animation:scroll 28s linear infinite;
}
.marquee-track span{color:#dedede;text-shadow:0 1px 2px #000}
.marquee-track .gold{color:#d8c08a}
.marquee-track b{color:#b9a776;font-size:14px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.buttons{
  width:100%;
  display:grid;
  grid-template-columns:1fr 140px;
  gap:16px 45px;
  align-items:center;
  padding:0 0 20px;
}
.btn{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 18px;
  text-decoration:none;
  text-transform:none;
  font-size:21px;
  font-weight:bold;
  color:#9b9ba7;
  background:
    radial-gradient(circle at center,#141419 0%,#09090b 68%);
  border:3px double #9a9aa0;
  box-shadow:inset 0 0 0 2px #111,0 1px 0 #222;
  position:relative;
  transition:.2s ease;
}
.btn:before,.btn:after{
  content:"✦";
  position:absolute;
  font-size:9px;
  opacity:.45;
  top:10px;
}
.btn:before{left:13px}.btn:after{right:13px;top:auto;bottom:10px}
.btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.35);
  box-shadow:inset 0 0 0 2px #222,0 0 16px rgba(255,255,255,.16);
}
.gold-btn{
  color:#d8c18c;
  border-color:#aaa08c;
}
.wide{min-width:0}
.buttons .btn:nth-child(5),
.buttons .btn:nth-child(7){margin-left:22px}
.buttons .btn:nth-child(6),
.buttons .btn:nth-child(8){margin-right:18px}

@media(max-width:1000px){
  .hero{min-height:100vh}
  .layout{
    width:min(760px,100%);
    grid-template-columns:1fr;
    gap:15px;
    padding:0 18px 30px;
  }
  .left{order:1}
  .right{order:2;padding-top:0}
  .right img{width:min(520px,100%)}
  .logo{width:min(440px,100%)}
  .marquee{width:100%}
  .buttons{
    width:min(520px,100%);
    margin:0 auto;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .buttons .btn:nth-child(5),
  .buttons .btn:nth-child(7){margin-left:0}
  .buttons .btn:nth-child(6),
  .buttons .btn:nth-child(8){margin-right:0}
}
@media(max-width:560px){
  .hero{min-height:auto}
  .layout{padding:0 10px 25px}
  .logo{width:330px}
  .marquee{height:58px}
  .marquee-track{font-size:16px;gap:20px}
  .buttons{grid-template-columns:1fr 1fr;gap:10px}
  .btn{min-height:58px;font-size:16px;padding:6px}
}