:root{--white:#f3f3f6}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#000}
body{font-family:Manrope,Arial,sans-serif;color:#fff;overflow:hidden}
a{text-decoration:none;color:inherit}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:10;
  padding:28px 4.8vw;
}
.brand{
  display:inline-flex;align-items:center;gap:17px;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.35));
}
.brand-mark{
  display:block;width:48px;height:48px;object-fit:contain;
}
.brand-word{
  display:block;width:154px;height:auto;object-fit:contain;
}

.hero-section{position:relative;width:100%;height:100vh;overflow:hidden}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center center;
  transform:scale(1.02);
  animation:slowZoom 18s ease-in-out infinite alternate;
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.89) 0%,rgba(0,0,0,.65) 43%,rgba(0,0,0,.20) 100%),
    linear-gradient(0deg,rgba(0,0,0,.56),transparent 62%);
}
.section-inner{
  position:relative;z-index:2;width:100%;height:100%;
  max-width:1600px;margin:0 auto;padding:0 6.5vw;
}
.inner-left-middle{
  position:absolute;left:6.5vw;top:51%;transform:translateY(-50%);
  max-width:970px;
}
h1{
  margin:0;
  max-width:980px;
  font-size:clamp(50px,6.3vw,98px);
  line-height:.96;
  letter-spacing:-.052em;
  font-weight:800;
  text-wrap:balance;
  text-shadow:0 3px 26px rgba(0,0,0,.35);
  opacity:0;
  animation:rise .9s .12s forwards;
}
.spx-button{
  position:relative;
  margin-top:34px;
  min-width:250px;
  height:58px;
  padding:0 21px;
  display:inline-flex;
  align-items:center;
  gap:28px;
  border:1px solid rgba(243,243,246,.84);
  overflow:hidden;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  opacity:0;
  animation:rise .9s .3s forwards;
}
.spx-button .text,.spx-button .arrow{position:relative;z-index:2}
.spx-button .arrow{
  margin-left:auto;display:grid;place-items:center;
  color:rgba(243,243,246,.86);transition:transform .25s ease;
}
.spx-button .button-fill{
  position:absolute;inset:0;background:#fff;
  transform:translateY(102%);transition:transform .28s ease;
}
.spx-button:hover{color:#050505}
.spx-button:hover .button-fill{transform:none}
.spx-button:hover .arrow{color:#050505;transform:translateX(4px)}

@keyframes rise{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}
@keyframes slowZoom{to{transform:scale(1.08)}}

@media(max-width:700px){
  .site-header{padding:20px}
  .brand{gap:12px}
  .brand-mark{width:39px;height:39px}
  .brand-word{width:118px}
  .section-inner{padding:0 22px}
  .inner-left-middle{left:22px;right:22px;top:52%}
  h1{font-size:49px}
  .spx-button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  h1,.spx-button{opacity:1}
}