:root{
  --navy:#061a38;
  --blue:#0b55ae;
  --cyan:#5ccaff;
  --white:#f5f9ff
}

*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  background:var(--navy);
  font-family:'DM Sans',Arial,sans-serif;
  color:var(--white)
}
.hero{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  overflow:hidden;
  background:radial-gradient(ellipse at 76% 45%,#0b2c5c 0,#071e40 38%,#061a38 73%)
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.14;
  background-image:linear-gradient(rgba(127,188,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(127,188,255,.13) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:linear-gradient(90deg,transparent,black 65%)
}
.ambient{
  position:absolute;
  z-index:-1;
  border-radius:50%;
  filter:blur(2px);
  pointer-events:none
}
.ambient-one{
  width:420px;
  height:420px;
  right:-185px;
  top:-235px;
  border:1px solid #378edb30;
  box-shadow:0 0 0 50px #2466aa0a,0 0 0 100px #2466aa08
}
.ambient-two{
  width:300px;
  height:300px;
  left:-210px;
  bottom:6%;
  background:#0b55ae12;
  filter:blur(45px)
}
.topbar{
  height:105px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2
}
.brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  padding:11px 15px;
  border:1px solid #fff;
  border-radius:8px;
  box-shadow:0 8px 28px #020e2390,0 0 0 1px #8dcfff30
}
.brand img{
  display:block;
  width:178px;
  height:auto
}
.contact-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#abc0da;
  font-size:12px;
  letter-spacing:.06em
}
.status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#48c2ff;
  box-shadow:0 0 12px #48c2ff
}
.hero-content{
  padding-top:43px;
  padding-bottom:45px;
  position:relative;
  z-index:1
}
.copy-column{
  padding-top:12px;
  padding-bottom:22px
}
.eyebrow{
  font-size:11px;
  letter-spacing:.2em;
  font-weight:700;
  color:#77cfff;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px
}
.eyebrow span{
  display:inline-block;
  width:24px;
  height:1px;
  background:#54bcff
}
h1{
  font:700 clamp(3.35rem,6.1vw,5.5rem)/1.04 'Manrope',sans-serif;
  letter-spacing:-.065em;
  color:#f6f9ff;
  margin:0 0 24px
}
h1 em{
  font-style:normal;
  color:#59bfff
}
.intro{
  font-size:16px;
  line-height:1.75;
  max-width:400px;
  color:#afc0d6;
  margin-bottom:30px
}
.location-button{
  background:#f2f7ff;
  border:0;
  border-radius:4px;
  padding:14px 18px;
  color:#09264c;
  font-size:12px;
  font-weight:700;
  transition:transform .2s,background .2s
}
.location-button:hover{
  background:white;
  transform:translateY(-2px);
  color:#09264c
}
.location-button span{
  font-size:17px;
  margin-left:20px
}
.coming-soon{
  display:flex;
  align-items:center;
  gap:11px;
  color:#8da5c2;
  font-size:11px;
  letter-spacing:.04em;
  margin-top:41px
}
.coming-soon .line{
  width:29px;
  height:1px;
  background:#3b648f
}
.art-column{
  position:relative
}
.art-wrap{
  height:min(520px,53vw);
  min-height:380px;
  max-width:590px;
  margin:0 auto;
  position:relative;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  will-change:transform
}
.art-glow{
  position:absolute;
  left:24%;
  top:21%;
  width:55%;
  height:60%;
  border-radius:50%;
  background:#078eff12;
  filter:blur(50px)
}
.gas-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  animation:float 5.5s ease-in-out infinite
}
.orbit{
  position:absolute;
  left:50%;
  top:51%;
  border:1px solid #65bfff19;
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-27deg)
}
.orbit-a{
  width:96%;
  height:55%
}
.orbit-b{
  width:78%;
  height:74%;
  transform:translate(-50%,-50%) rotate(38deg);
  border-color:#65bfff11
}
.art-caption{
  position:absolute;
  right:1%;
  bottom:14%;
  display:flex;
  align-items:center;
  gap:11px;
  color:#90acca;
  font-size:8px;
  line-height:1.6;
  letter-spacing:.16em
}
.art-caption b{
  font-size:9px;
  color:#d6eaff;
  letter-spacing:.12em
}
.caption-icon{
  font-size:26px;
  color:#62c7ff
}
.decor-label{
  position:absolute;
  right:25px;
  top:18px;
  font-size:9px;
  letter-spacing:.16em;
  color:#6683a6
}
.footer{
  position:relative;
  z-index:1;
  min-height:132px;
  border-top:1px solid #9dcaff24;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  text-align:center
}
.footer-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  text-align:left
}
.pin{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid #3d72a7
}
.pin svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:#8dd5ff;
  stroke-width:1.5
}
.footer-mark small{
  font-size:9px;
  letter-spacing:.16em;
  color:#6f8cac;
  display:block;
  margin-bottom:5px
}
.footer-mark p{
  font-size:15px;
  line-height:1.65;
  color:#e0ebf9;
  margin:0
}
.footer-right{
  font-size:8px;
  letter-spacing:.12em;
  color:#7088a7
}
.footer-right a{
  color:#aac4e1;
  text-decoration:none
}
.footer-right a:hover{
  color:#fff
}
.footer-sep{
  margin:0 7px;
  color:#4788bf
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-16px);
  }
}
50%{
  transform:translateY(-8px)
}

}

@media(max-width:991.98px){
  .hero-content{
  padding-top:22px;
  padding-bottom:28px
}
.copy-column{
  padding-top:4px
}
.art-wrap{
  height:430px;
  max-width:540px
}
.decor-label{
  right:5%;
  top:4%
}
.footer{
  padding-top:24px;
  padding-bottom:24px
}

}

@media(max-width:575.98px){
  .topbar{
  height:80px
}
.brand img{
  width:157px
}
.contact-link{
  font-size:10px
}
.hero-content{
  padding-top:28px
}
h1{
  font-size:clamp(3.2rem,14vw,4.5rem)
}
.intro{
  font-size:14px;
  max-width:340px
}
.coming-soon{
  margin-top:28px
}
.art-wrap{
  height:340px;
  min-height:320px;
  margin-top:-8px
}
.decor-label{
  font-size:8px
}
.footer{
  align-items:center;
  flex-direction:column;
  gap:0;
  padding-top:22px;
  padding-bottom:22px
}
.footer-mark{
  flex-direction:column;
  gap:10px;
  text-align:center
}
.footer-mark p{
  font-size:13px
}

}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
  scroll-behavior:auto!important;
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important
}

}