:root{
  --bg:#07100f;
  --bg2:#101a19;
  --white:#f4f5f2;
  --muted:#aeb8b4;
  --dim:#71807b;
  --line:rgba(222,235,229,.16);
  --green:#a7c5ba;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  min-height:100%;
}

body{
  min-height:100vh;
  overflow:hidden;
  color:var(--white);
  background:
    radial-gradient(ellipse at 64% 48%,rgba(118,154,143,.18),transparent 28%),
    radial-gradient(ellipse at 32% 80%,rgba(53,78,71,.15),transparent 35%),
    linear-gradient(135deg,#0b1514 0%,#07100f 55%,#030807 100%);
  font-family:Arial,Helvetica,sans-serif;
}

.noise{
  position:fixed;
  inset:-50%;
  z-index:10;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noise .25s steps(2) infinite;
}

.stars{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background-image:
    radial-gradient(circle,rgba(235,242,239,.65) 0 1px,transparent 1.3px),
    radial-gradient(circle,rgba(235,242,239,.3) 0 1px,transparent 1.4px);
  background-size:137px 113px,241px 197px;
  background-position:20px 8px,80px 40px;
}

.header{
  position:relative;
  z-index:5;
  height:86px;
  width:calc(100% - 96px);
  max-width:1380px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--white);
  text-decoration:none;
}

.logo-mark{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.62);
  font-family:Georgia,serif;
  font-size:17px;
}

.logo-text{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.3px;
}

.logo-text span{
  color:#9fd9cb;
}

.header-status{
  display:flex;
  align-items:center;
  gap:9px;
  color:#aab4b0;
  font-size:9px;
  font-weight:600;
  letter-spacing:2px;
}

.status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#b6d7cc;
  box-shadow:0 0 14px #b6d7cc;
}

.hero{
  position:relative;
  z-index:2;
  width:calc(100% - 96px);
  max-width:1380px;
  min-height:calc(100vh - 156px);
  margin:auto;
  display:grid;
  grid-template-columns:47% 53%;
  align-items:center;
}

.message{
  position:relative;
  z-index:5;
  padding-bottom:28px;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:13px;
  color:#c1cbc7;
  font-size:10px;
  letter-spacing:3px;
  font-weight:600;
  margin-bottom:27px;
}

.eyebrow span{
  display:block;
  width:29px;
  height:1px;
  background:#b9cfc6;
}

h1{
  margin:0;
  max-width:680px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(58px,7.2vw,104px);
  font-weight:400;
  line-height:.92;
  letter-spacing:-5px;
}

h1 span{
  color:transparent;
  -webkit-text-stroke:1px rgba(241,244,242,.65);
  text-shadow:0 0 30px rgba(204,221,215,.05);
}

.message p{
  max-width:400px;
  margin:35px 0 29px;
  color:#aeb9b5;
  font-size:14px;
  line-height:1.65;
}

.line{
  width:160px;
  height:1px;
  background:linear-gradient(90deg,#c1d0ca,transparent);
}

.small-note{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:22px;
  color:#8f9c98;
  font-size:9px;
  letter-spacing:2px;
}

.small-note span{
  color:#d4dfdb;
}

.small-note strong{
  font-weight:500;
}

/* Abstract architectural sculpture */

.architecture{
  position:relative;
  height:620px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1100px;
}

.glow{
  position:absolute;
  width:500px;
  height:300px;
  border-radius:50%;
  background:rgba(136,172,160,.13);
  filter:blur(65px);
  transform:translate(30px,80px);
}

.tower{
  position:absolute;
  transform-style:preserve-3d;
  filter:drop-shadow(0 35px 28px rgba(0,0,0,.42));
}

.tower .face{
  position:absolute;
  background:linear-gradient(145deg,rgba(158,177,170,.76),rgba(62,77,72,.72));
  border:1px solid rgba(216,228,222,.22);
  box-shadow:inset 0 0 30px rgba(226,238,233,.07);
}

.tower .front{
  width:180px;
  height:220px;
  left:0;
  top:0;
}

.tower .side{
  width:72px;
  height:220px;
  left:180px;
  top:0;
  transform:skewY(-35deg);
  transform-origin:left top;
  background:linear-gradient(120deg,#53645e,#1f2b28);
}

.tower .top{
  width:180px;
  height:72px;
  left:0;
  top:-72px;
  transform:skewX(-35deg);
  transform-origin:left bottom;
  background:linear-gradient(140deg,#b3c2bc,#64736d);
}

.tower-back{
  width:180px;
  height:220px;
  transform:translate(100px,-120px) rotateY(-4deg) rotateZ(0deg);
  opacity:.72;
}

.tower-mid{
  width:180px;
  height:220px;
  transform:translate(-10px,35px);
  opacity:.84;
}

.tower-front{
  width:180px;
  height:220px;
  transform:translate(-135px,135px);
}

.tower-front .front{
  background:linear-gradient(150deg,#9cabA5,#465650 62%,#27332f);
}

.tower-mid .front{
  background:linear-gradient(145deg,#84958e,#3f4e49);
}

.steps{
  position:absolute;
  width:520px;
  height:280px;
  bottom:66px;
  right:2%;
  transform:skewY(-31deg) rotateX(52deg) rotateZ(-5deg);
  transform-origin:center;
  opacity:.86;
}

.steps i{
  display:block;
  position:absolute;
  width:90px;
  height:48px;
  border:1px solid rgba(194,210,203,.22);
  background:linear-gradient(145deg,rgba(98,117,110,.42),rgba(24,34,31,.42));
}

.steps i:nth-child(1){left:0;bottom:0}
.steps i:nth-child(2){left:55px;bottom:38px}
.steps i:nth-child(3){left:110px;bottom:76px}
.steps i:nth-child(4){left:165px;bottom:114px}
.steps i:nth-child(5){left:220px;bottom:152px}
.steps i:nth-child(6){left:275px;bottom:190px}

.orbit-line{
  position:absolute;
  width:430px;
  height:150px;
  border-top:1px solid rgba(191,211,203,.23);
  border-radius:50%;
  right:-20px;
  bottom:115px;
  transform:rotate(-31deg);
}

.orbit-line:after{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  right:23%;
  top:-3px;
  border-radius:50%;
  background:#c3ddd3;
  box-shadow:0 0 15px #c3ddd3;
}

.footer{
  position:relative;
  z-index:5;
  width:calc(100% - 96px);
  max-width:1380px;
  height:70px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  border-top:1px solid var(--line);
  color:#74817d;
  font-size:9px;
  letter-spacing:.4px;
}

.footer span:last-child{
  text-align:right;
}

.footer b{
  color:#a9d0c4;
  font-weight:600;
}

@keyframes noise{
  0%{transform:translate(0,0)}
  25%{transform:translate(2%,-1%)}
  50%{transform:translate(-1%,2%)}
  75%{transform:translate(1%,1%)}
  100%{transform:translate(0,0)}
}

@media(max-width:900px){
  body{overflow:auto}
  .header,.hero,.footer{width:calc(100% - 40px)}
  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:45px 0 20px;
  }
  .architecture{
    height:490px;
    order:-1;
    transform:scale(.8);
    margin:-45px 0 -30px;
  }
  .message{padding-bottom:45px}
  .footer{
    height:auto;
    min-height:75px;
    padding:20px 0;
  }
}

@media(max-width:600px){
  .header{
    height:72px;
  }
  .header-status{
    font-size:7px;
    letter-spacing:1.3px;
  }
  .logo-text{font-size:15px}
  .hero{
    padding-top:15px;
  }
  .architecture{
    height:350px;
    transform:scale(.62);
    margin:-65px 0 -65px;
  }
  h1{
    font-size:55px;
    letter-spacing:-3px;
  }
  .message p{
    font-size:13px;
  }
  .footer{
    grid-template-columns:1fr;
    gap:9px;
    text-align:center;
  }
  .footer span:last-child{
    text-align:center;
  }
}


/* Startex Global footer identity */
.footer{
  grid-template-columns:1fr 1fr;
}
.footer-company{
  display:flex;
  align-items:center;
  gap:14px;
}
.footer-company img{
  width:112px;
  height:auto;
  max-height:48px;
  object-fit:contain;
  object-position:left center;
  background:transparent;
}
.footer-company .service-line{
  display:block;
  color:#d7dfdb;
  font-size:11px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:none;
}
.footer-company .service-line i{
  color:#9bb6ac;
  font-style:normal;
  padding:0 5px;
}
.footer-company small{
  display:block;
  margin-top:5px;
  color:#77847f;
  font-size:9px;
  letter-spacing:.8px;
}
.footer-company small b{
  color:#9fd0c1;
  font-weight:600;
}

@media(max-width:900px){
  .footer{
    grid-template-columns:1fr;
    justify-items:center;
  }
  .footer-company{
    justify-content:center;
  }
}

@media(max-width:600px){
  .footer-company img{
    width:92px;
  }
  .footer-company .service-line{
    font-size:9px;
    letter-spacing:1px;
  }
}


/* Prominent Startex Global attribution */
.startex-credit{
  margin-top:30px;
  display:flex;
  align-items:center;
  gap:16px;
  width:max-content;
  padding:12px 17px 12px 12px;
  border:1px solid rgba(213,231,224,.17);
  background:rgba(5,13,12,.38);
  backdrop-filter:blur(10px);
  box-shadow:0 15px 35px rgba(0,0,0,.18);
}
.startex-credit img{
  display:block;
  width:138px;
  height:auto;
  max-height:55px;
  object-fit:contain;
  object-position:left center;
}
.startex-copy{
  border-left:1px solid rgba(213,231,224,.16);
  padding-left:16px;
  white-space:nowrap;
}
.startex-copy span{
  display:block;
  color:#e2e8e5;
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
}
.startex-copy i{
  color:#9bb5ac;
  font-style:normal;
  padding:0 4px;
}
.startex-copy b{
  display:block;
  margin-top:5px;
  color:#9fd0c1;
  font-size:10px;
  font-weight:500;
  letter-spacing:1.2px;
}

.footer{
  grid-template-columns:1fr 1fr;
}

@media(max-width:600px){
  .startex-credit{
    width:100%;
    max-width:390px;
    gap:11px;
    padding:10px;
  }
  .startex-credit img{
    width:105px;
    max-height:44px;
  }
  .startex-copy{
    padding-left:11px;
  }
  .startex-copy span{
    font-size:9px;
    letter-spacing:.6px;
  }
  .startex-copy b{
    font-size:8px;
  }
}