:root{
  --ink:#090604;
  --ink-soft:#100a06;
  --paper:#f7f2ea;
  --orange:#ff6a00;
  --orange-soft:#ff9343;
  --muted:rgba(247,242,234,.60);
  --line:rgba(255,255,255,.10);
}

*{
  box-sizing:border-box;
}

html{
  background:var(--ink);
}

body{
  margin:0;
  min-width:320px;
  background:var(--ink);
  color:var(--paper);
  font-family:"Open Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}


/* =========================================================
   PAGE
========================================================= */

.coming-soon{
  --mx:50%;
  --my:46%;
  --px:0px;
  --py:0px;

  position:relative;
  width:100vw;
  height:100vh;
  height:100svh;
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 64% 44%,rgba(255,106,0,.08),transparent 30%),
    var(--ink);
}


/* =========================================================
   IMAGE
========================================================= */

.hero-image{
  position:absolute;
  inset:-3%;
  z-index:0;
  will-change:transform;
  transform:
    translate3d(
      calc(var(--px) * -.10),
      calc(var(--py) * -.10),
      0
    )
    scale(1.04);
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(5,3,2,.94) 0%,
      rgba(5,3,2,.80) 22%,
      rgba(5,3,2,.34) 47%,
      rgba(5,3,2,.10) 66%,
      rgba(5,3,2,.37) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5,3,2,.50) 0%,
      transparent 25%,
      transparent 64%,
      rgba(5,3,2,.82) 100%
    );
}


/* =========================================================
   BACKGROUND ATMOSPHERE
========================================================= */

.ambient-glow{
  position:absolute;
  inset:-10%;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(
      circle at var(--mx) var(--my),
      rgba(255,106,0,.18),
      rgba(255,106,0,.04) 16%,
      transparent 34%
    );

  filter:blur(18px);
  opacity:.95;
}

.grain{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.04;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.82'/%3E%3C/svg%3E");
}

.vignette{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  box-shadow:
    inset 0 0 200px rgba(0,0,0,.70),
    inset 0 -150px 160px rgba(0,0,0,.18);
}


/* =========================================================
   TECH LAYERS
========================================================= */

.tech-layer{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
}

.tech-grid{
  position:absolute;
  inset:0;
  opacity:.15;

  background-image:
    linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);

  background-size:74px 74px;

  mask-image:
    radial-gradient(
      circle at 56% 47%,
      black 16%,
      rgba(0,0,0,.60) 38%,
      transparent 76%
    );

  transform:
    translate3d(
      calc(var(--px) * -.18),
      calc(var(--py) * -.18),
      0
    );
}

.scan-line{
  position:absolute;
  left:0;
  right:0;
  top:-2px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent 10%,
      rgba(255,106,0,.18) 30%,
      rgba(255,134,40,.65) 50%,
      rgba(255,106,0,.18) 70%,
      transparent 90%
    );

  box-shadow:
    0 0 18px rgba(255,106,0,.28);

  animation:
    scan 6.5s linear infinite;
}

.light-beam{
  position:absolute;
  top:-18%;
  left:50%;
  width:34vw;
  height:140vh;

  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(255,106,0,.035) 25%,
      rgba(255,106,0,.10) 50%,
      rgba(255,106,0,.025) 72%,
      transparent 100%
    );

  transform:rotate(13deg);
  filter:blur(20px);
  mix-blend-mode:screen;
  opacity:.65;

  animation:
    beam 10s ease-in-out infinite;
}


.orbit{
  position:absolute;
  left:65.7%;
  top:42.8%;

  border-radius:50%;
  transform:
    translate(
      calc(-50% + (var(--px) * .10)),
      calc(-50% + (var(--py) * .10))
    );

  will-change:transform;
}

.orbit-one{
  width:min(24vw,365px);
  aspect-ratio:1;

  border:
    1px solid rgba(255,106,0,.18);

  box-shadow:
    0 0 40px rgba(255,106,0,.08),
    inset 0 0 35px rgba(255,106,0,.035);

  animation:
    orbitPulse 5s ease-in-out infinite;
}

.orbit-two{
  width:min(31vw,470px);
  height:min(10vw,145px);

  border:
    1px solid rgba(255,106,0,.12);

  transform:
    translate(
      calc(-50% + (var(--px) * .16)),
      calc(-50% + (var(--py) * .16))
    )
    rotate(-17deg);

  animation:
    orbitFloat 7s ease-in-out infinite;
}


/* Floating points */

.data-points span{
  position:absolute;
  width:3px;
  height:3px;

  border-radius:50%;
  background:rgba(255,164,88,.90);

  box-shadow:
    0 0 12px rgba(255,106,0,.75);

  animation:
    pointFloat 5.5s ease-in-out infinite;
}

.data-points span:nth-child(1){
  left:59%;
  top:29%;
}

.data-points span:nth-child(2){
  left:70%;
  top:31%;
  animation-delay:-1s;
}

.data-points span:nth-child(3){
  left:76%;
  top:43%;
  animation-delay:-2s;
}

.data-points span:nth-child(4){
  left:72%;
  top:55%;
  animation-delay:-3s;
}

.data-points span:nth-child(5){
  left:63%;
  top:58%;
  animation-delay:-4s;
}

.data-points span:nth-child(6){
  left:79%;
  top:35%;
  animation-delay:-2.7s;
}


/* Tiny UI signals */

.signal{
  position:absolute;

  display:flex;
  align-items:center;
  gap:9px;

  color:rgba(247,242,234,.40);

  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;

  text-transform:uppercase;

  opacity:.68;
}

.signal span{
  width:5px;
  height:5px;
  border-radius:50%;

  background:var(--orange);

  box-shadow:
    0 0 12px rgba(255,106,0,.80);

  animation:
    signalPulse 2.2s ease-in-out infinite;
}

.signal i{
  display:block;
  width:48px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(255,106,0,.50),
      transparent
    );
}

.signal-one{
  right:11%;
  top:29%;
}

.signal-two{
  right:18%;
  bottom:25%;
}


/* =========================================================
   HEADER
========================================================= */

.site-header{
  position:absolute;
  left:0;
  top:0;
  right:0;

  z-index:20;

  height:92px;
  padding:0 4.7vw;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:
    1px solid rgba(255,255,255,.055);
}

.brand{
  display:flex;
  gap:7px;

  font-size:14px;
  font-weight:800;
  letter-spacing:.14em;

  text-transform:uppercase;
}

.brand b{
  color:var(--orange);
}

.status{
  display:flex;
  align-items:center;
  gap:10px;

  color:rgba(247,242,234,.50);

  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;

  text-transform:uppercase;
}

.status-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--orange);

  box-shadow:
    0 0 15px rgba(255,106,0,.85);

  animation:
    statusPulse 2s ease-in-out infinite;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content{
  position:absolute;
  inset:0;

  z-index:10;

  display:flex;
  align-items:center;

  padding:
    104px 5.7vw
    122px;
}

.copy-block{
  position:relative;
  width:min(870px,62vw);

  transform:
    translate3d(
      calc(var(--px) * .05),
      calc(var(--py) * .05),
      0
    );

  will-change:transform;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:14px;

  margin-bottom:24px;

  color:var(--orange-soft);

  font-size:10px;
  font-weight:800;
  letter-spacing:.24em;

  text-transform:uppercase;

  animation:
    revealUp .85s .05s
    cubic-bezier(.2,.85,.2,1)
    both;
}

.eyebrow-line{
  display:block;

  width:50px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--orange),
      rgba(255,106,0,.18)
    );

  box-shadow:
    0 0 14px rgba(255,106,0,.50);
}


.brand-title{
  margin:0;

  text-transform:uppercase;

  font-size:
    clamp(
      58px,
      7.2vw,
      128px
    );

  font-weight:800;

  line-height:.78;

  letter-spacing:-.057em;
}

.brand-line{
  display:block;
}

.brand-line-one{
  color:var(--paper);

  animation:
    revealUp 1s .12s
    cubic-bezier(.2,.85,.2,1)
    both;
}

.brand-line-two{
  margin-top:18px;

  color:transparent;

  -webkit-text-stroke:
    1.4px rgba(255,255,255,.65);

  animation:
    revealUp 1s .20s
    cubic-bezier(.2,.85,.2,1)
    both;
}


.coming-title{
  display:flex;
  align-items:flex-end;
  gap:18px;

  margin-top:28px;

  font-size:
    clamp(
      25px,
      2.6vw,
      46px
    );

  line-height:1;

  font-weight:800;
  letter-spacing:.12em;

  text-transform:uppercase;

  animation:
    revealUp 1s .31s
    cubic-bezier(.2,.85,.2,1)
    both;
}

.coming-title span{
  color:rgba(247,242,234,.72);
}

.coming-title strong{
  color:var(--orange);

  font-size:1.34em;

  letter-spacing:.08em;

  text-shadow:
    0 0 28px rgba(255,106,0,.20);

  animation:
    comingGlow 3s ease-in-out infinite;
}


.hero-footer-copy{
  display:grid;
  grid-template-columns:
    minmax(250px,.72fr)
    minmax(280px,1fr);

  gap:40px;

  align-items:end;

  margin-top:42px;

  padding-top:21px;

  border-top:
    1px solid rgba(255,255,255,.10);

  animation:
    revealUp 1s .42s
    cubic-bezier(.2,.85,.2,1)
    both;
}

.lead{
  margin:0;

  font-size:12px;
  line-height:1.58;

  font-weight:800;
  letter-spacing:.075em;

  text-transform:uppercase;
}

.lead span{
  display:block;
  color:var(--orange-soft);
}

.description{
  margin:0;
  max-width:430px;

  color:var(--muted);

  font-size:12px;
  line-height:1.72;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.bottom-bar{
  position:absolute;
  left:4.7vw;
  right:4.7vw;
  bottom:28px;

  z-index:20;

  display:grid;
  grid-template-columns:
    minmax(210px,1fr)
    auto
    minmax(210px,1fr);

  gap:36px;

  align-items:end;
}

.loading{
  width:min(100%,310px);
}

.loading-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:9px;

  color:rgba(247,242,234,.46);

  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;

  text-transform:uppercase;
}

.loading-track{
  position:relative;
  width:100%;
  height:1px;

  overflow:hidden;

  background:
    rgba(255,255,255,.13);
}

.loading-track span{
  position:absolute;
  left:0;
  top:0;
  bottom:0;

  width:0%;

  background:
    linear-gradient(
      90deg,
      var(--orange),
      #ff9c50
    );

  box-shadow:
    0 0 14px rgba(255,106,0,.55);
}

.capabilities{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;

  color:rgba(247,242,234,.42);

  font-size:7.5px;
  font-weight:800;
  letter-spacing:.13em;

  text-transform:uppercase;
}

.capabilities i{
  width:3px;
  height:3px;

  border-radius:50%;

  background:
    rgba(255,106,0,.75);
}

.copyright{
  justify-self:end;

  color:rgba(247,242,234,.34);

  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;

  text-transform:uppercase;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes revealUp{
  from{
    opacity:0;
    transform:
      translate3d(0,28px,0);
  }

  to{
    opacity:1;
    transform:
      translate3d(0,0,0);
  }
}

@keyframes comingGlow{
  0%,100%{
    opacity:.90;

    text-shadow:
      0 0 20px rgba(255,106,0,.16),
      0 0 55px rgba(255,106,0,.06);
  }

  50%{
    opacity:1;

    text-shadow:
      0 0 30px rgba(255,106,0,.34),
      0 0 80px rgba(255,106,0,.13);
  }
}

@keyframes scan{
  from{
    transform:
      translateY(-4vh);
  }

  to{
    transform:
      translateY(104vh);
  }
}

@keyframes beam{
  0%,100%{
    transform:
      translateX(-10%)
      rotate(10deg);
  }

  50%{
    transform:
      translateX(16%)
      rotate(15deg);
  }
}

@keyframes orbitPulse{
  0%,100%{
    opacity:.48;
    scale:.95;
  }

  50%{
    opacity:.92;
    scale:1.035;
  }
}

@keyframes orbitFloat{
  0%,100%{
    opacity:.42;
  }

  50%{
    opacity:.82;
  }
}

@keyframes pointFloat{
  0%,100%{
    opacity:.28;
    transform:
      translate3d(0,0,0)
      scale(.85);
  }

  50%{
    opacity:1;
    transform:
      translate3d(0,-22px,0)
      scale(1.22);
  }
}

@keyframes signalPulse{
  0%,100%{
    opacity:.45;
    transform:scale(.80);
  }

  50%{
    opacity:1;
    transform:scale(1.12);
  }
}

@keyframes statusPulse{
  0%,100%{
    opacity:.45;
    transform:scale(.85);
  }

  50%{
    opacity:1;
    transform:scale(1.12);
  }
}



/* =========================================================
   CINEMATIC TEXT ANIMATION
========================================================= */

/* JS splits these lines into individual characters. */
.brand-line,
.coming-title > span,
.coming-title > strong{
  position:relative;
  overflow:hidden;
}

.char{
  display:inline-block;
  min-width:.02em;
  opacity:0;

  transform:
    translate3d(0,115%,0)
    rotateX(-75deg)
    scale(.96);

  transform-origin:
    50% 100%;

  filter:blur(8px);

  animation:
    charBuild .82s
    cubic-bezier(.16,.88,.22,1)
    forwards;

  animation-delay:
    calc(
      var(--char-delay,0ms) +
      (var(--i) * 34ms)
    );

  will-change:
    transform,
    opacity,
    filter;
}

.char.space{
  width:.28em;
}


/* OPTIMIZERS starts first */
.brand-line-one .char{
  --char-delay:160ms;
}


/* GLOBAL follows with a slightly wider build */
.brand-line-two .char{
  --char-delay:470ms;
}


/* Orange energy scan across GLOBAL */
.brand-line-two::after{
  content:"GLOBAL";

  position:absolute;
  inset:0;

  display:flex;
  align-items:center;

  color:transparent;

  -webkit-text-stroke:
    1.3px transparent;

  background:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 38%,
      #ff6a00 47%,
      #ffb173 50%,
      #ff6a00 53%,
      transparent 62%,
      transparent 100%
    );

  background-size:
    240% 100%;

  background-position:
    160% 0;

  -webkit-background-clip:text;
  background-clip:text;

  opacity:0;

  pointer-events:none;

  animation:
    globalEnergySweep
    4.8s
    1.55s
    cubic-bezier(.4,0,.2,1)
    infinite;
}


/* COMING / SOON build */
.coming-title > span .char{
  --char-delay:920ms;
}

.coming-title > strong .char{
  --char-delay:1100ms;
}


/* Slight tracking expansion after COMING arrives */
.coming-title{
  animation:
    comingTrack
    1.15s
    .82s
    cubic-bezier(.18,.86,.2,1)
    both;
}


/* Bottom copy enters as a masked wipe */
.hero-footer-copy{
  clip-path:
    inset(0 100% 0 0);

  opacity:1;

  animation:
    copyWipe
    1.15s
    1.34s
    cubic-bezier(.2,.86,.18,1)
    forwards;
}


/* Supporting heading gets a subtle live orange accent */
.lead span{
  position:relative;

  background:
    linear-gradient(
      90deg,
      #ff8d39,
      #ffc18f,
      #ff6a00,
      #ff8d39
    );

  background-size:
    220% 100%;

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;

  animation:
    accentFlow
    5s
    linear
    infinite;
}


/* Description comes in slightly later than its parent wipe */
.description{
  animation:
    descriptionLift
    .9s
    1.55s
    cubic-bezier(.2,.8,.2,1)
    both;
}


/* Eyebrow line behaves like a system boot indicator */
.eyebrow-line{
  transform-origin:left center;

  animation:
    systemLine
    2.6s
    ease-in-out
    infinite;
}


/* Very short periodic digital distortion.
   JS only activates this for ~180ms every several seconds. */
.brand-title.is-glitching .brand-line-one{
  animation:
    microGlitchOne
    .18s
    steps(2,end);
}

.brand-title.is-glitching .brand-line-two{
  animation:
    microGlitchTwo
    .18s
    steps(2,end);
}


/* A tiny orange cursor/light that travels below the big brand title */
.brand-title::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-17px;

  width:82px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ff6a00,
      #ffb173,
      transparent
    );

  box-shadow:
    0 0 14px
    rgba(255,106,0,.48);

  opacity:0;

  animation:
    titleTracer
    5.2s
    1.6s
    ease-in-out
    infinite;
}


/* The title needs to be a positioning context for tracer */
.brand-title{
  position:relative;
}


/* Disable the old one-piece reveal on elements now animated per-character. */
.brand-line-one,
.brand-line-two,
.coming-title{
  animation-name:none;
}


/* KEYFRAMES */

@keyframes charBuild{
  0%{
    opacity:0;

    transform:
      translate3d(0,115%,0)
      rotateX(-75deg)
      scale(.96);

    filter:blur(8px);
  }

  58%{
    opacity:1;
    filter:blur(0);
  }

  100%{
    opacity:1;

    transform:
      translate3d(0,0,0)
      rotateX(0deg)
      scale(1);

    filter:blur(0);
  }
}


@keyframes globalEnergySweep{
  0%,
  14%{
    opacity:0;
    background-position:160% 0;
  }

  20%{
    opacity:.9;
  }

  42%{
    opacity:.9;
    background-position:-60% 0;
  }

  50%,
  100%{
    opacity:0;
    background-position:-60% 0;
  }
}


@keyframes comingTrack{
  from{
    opacity:0;
    letter-spacing:.30em;
    transform:translate3d(0,16px,0);
  }

  to{
    opacity:1;
    letter-spacing:.12em;
    transform:translate3d(0,0,0);
  }
}


@keyframes copyWipe{
  from{
    clip-path:
      inset(0 100% 0 0);
  }

  to{
    clip-path:
      inset(0 0 0 0);
  }
}


@keyframes descriptionLift{
  from{
    opacity:0;
    transform:translate3d(0,12px,0);
  }

  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}


@keyframes accentFlow{
  from{
    background-position:0% 50%;
  }

  to{
    background-position:220% 50%;
  }
}


@keyframes systemLine{
  0%,
  100%{
    opacity:.48;
    transform:scaleX(.56);
  }

  50%{
    opacity:1;
    transform:scaleX(1);
  }
}


@keyframes titleTracer{
  0%,
  8%{
    opacity:0;
    transform:translateX(0);
  }

  14%{
    opacity:1;
  }

  46%{
    opacity:1;
    transform:
      translateX(
        min(34vw,440px)
      );
  }

  54%,
  100%{
    opacity:0;

    transform:
      translateX(
        min(34vw,440px)
      );
  }
}


@keyframes microGlitchOne{
  0%{
    transform:translate3d(0,0,0);
    text-shadow:none;
  }

  35%{
    transform:translate3d(2px,-1px,0);

    text-shadow:
      -3px 0 rgba(255,106,0,.32),
      3px 0 rgba(255,255,255,.10);
  }

  70%{
    transform:translate3d(-1px,1px,0);

    text-shadow:
      3px 0 rgba(255,106,0,.24);
  }

  100%{
    transform:translate3d(0,0,0);
    text-shadow:none;
  }
}


@keyframes microGlitchTwo{
  0%{
    transform:translate3d(0,0,0);
  }

  40%{
    transform:translate3d(-2px,0,0);
  }

  72%{
    transform:translate3d(2px,1px,0);
  }

  100%{
    transform:translate3d(0,0,0);
  }
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width:1000px){

  .coming-soon{
    min-height:580px;
  }

  .site-header{
    height:78px;
    padding:0 24px;
  }

  .status{
    font-size:8px;
  }

  .hero-content{
    padding:
      92px 24px
      118px;
  }

  .copy-block{
    width:min(760px,72vw);
  }

  .brand-title{
    font-size:
      clamp(
        54px,
        9vw,
        96px
      );
  }

  .hero-footer-copy{
    gap:25px;
  }

  .bottom-bar{
    left:24px;
    right:24px;
    bottom:24px;

    grid-template-columns:
      minmax(180px,1fr)
      auto;
  }

  .capabilities{
    display:none;
  }

  .orbit{
    left:68%;
  }
}


/* =========================================================
   MOBILE
========================================================= */


@media (max-width:720px){

  .char{
    animation-delay:
      calc(
        var(--char-delay,0ms) +
        (var(--i) * 26ms)
      );
  }

  .brand-line-one .char{
    --char-delay:120ms;
  }

  .brand-line-two .char{
    --char-delay:360ms;
  }

  .coming-title > span .char{
    --char-delay:720ms;
  }

  .coming-title > strong .char{
    --char-delay:850ms;
  }

  .brand-title::after{
    bottom:-11px;
    width:55px;
  }

  @keyframes titleTracer{
    0%,
    8%{
      opacity:0;
      transform:translateX(0);
    }

    14%{
      opacity:1;
    }

    46%{
      opacity:1;
      transform:translateX(48vw);
    }

    54%,
    100%{
      opacity:0;
      transform:translateX(48vw);
    }
  }

}

@media (max-width:720px){

  body{
    overflow:hidden;
  }

  .coming-soon{
    height:100svh;
    min-height:560px;
  }

  .site-header{
    height:66px;

    padding:
      0
      max(17px,env(safe-area-inset-right))
      0
      max(17px,env(safe-area-inset-left));
  }

  .brand{
    gap:5px;

    font-size:10px;
    letter-spacing:.10em;
  }

  .status{
    gap:7px;

    max-width:140px;

    font-size:6.5px;
    line-height:1.35;

    text-align:right;
    letter-spacing:.10em;
  }

  .status-dot{
    flex:0 0 auto;

    width:5px;
    height:5px;
  }


  /* Image framing is changed specifically for the portrait viewport */
  .hero-image{
    inset:-1%;
    transform:
      translate3d(
        calc(var(--px) * -.045),
        calc(var(--py) * -.045),
        0
      )
      scale(1.025);
  }

  .hero-image img{
    object-position:55% center;
  }

  .hero-image::after{
    background:
      linear-gradient(
        180deg,
        rgba(5,3,2,.52) 0%,
        rgba(5,3,2,.18) 24%,
        rgba(5,3,2,.38) 58%,
        rgba(5,3,2,.96) 100%
      ),
      linear-gradient(
        90deg,
        rgba(5,3,2,.64) 0%,
        rgba(5,3,2,.12) 60%,
        rgba(5,3,2,.20) 100%
      );
  }


  .tech-grid{
    opacity:.08;

    background-size:
      52px 52px;
  }

  .light-beam{
    width:65vw;
    left:45%;
    opacity:.38;
  }

  .orbit{
    left:59%;
    top:35%;
  }

  .orbit-one{
    width:min(54vw,210px);
  }

  .orbit-two{
    width:min(72vw,280px);
    height:min(24vw,92px);
  }

  .data-points span:nth-child(n+5){
    display:none;
  }

  .signal{
    display:none;
  }


  .hero-content{
    display:block;

    padding:
      0
      max(18px,env(safe-area-inset-right))
      0
      max(18px,env(safe-area-inset-left));
  }

  .copy-block{
    position:absolute;

    left:max(18px,env(safe-area-inset-left));
    right:max(18px,env(safe-area-inset-right));
    bottom:112px;

    width:auto;

    transform:none;
  }

  .eyebrow{
    gap:10px;

    margin-bottom:12px;

    font-size:7.5px;
    letter-spacing:.18em;
  }

  .eyebrow-line{
    width:33px;
  }

  .brand-title{
    width:100%;

    font-size:
      clamp(
        40px,
        12.1vw,
        69px
      );

    line-height:.80;
    letter-spacing:-.06em;
  }

  .brand-line-two{
    margin-top:10px;

    -webkit-text-stroke:
      1px rgba(255,255,255,.62);
  }

  .coming-title{
    gap:10px;

    margin-top:17px;

    font-size:
      clamp(
        17px,
        4.8vw,
        27px
      );

    letter-spacing:.10em;
  }

  .hero-footer-copy{
    display:block;

    margin-top:20px;
    padding-top:14px;
  }

  .lead{
    max-width:300px;

    font-size:9.5px;
    line-height:1.52;

    letter-spacing:.055em;
  }

  .description{
    max-width:330px;

    margin-top:11px;

    font-size:10px;
    line-height:1.56;

    color:
      rgba(247,242,234,.56);
  }


  .bottom-bar{
    left:max(18px,env(safe-area-inset-left));
    right:max(18px,env(safe-area-inset-right));

    bottom:
      max(
        18px,
        calc(env(safe-area-inset-bottom) + 11px)
      );

    display:grid;
    grid-template-columns:1fr auto;
    gap:18px;

    align-items:end;
  }

  .loading{
    width:100%;
    max-width:220px;
  }

  .loading-meta{
    margin-bottom:7px;

    font-size:6.5px;
  }

  .copyright{
    max-width:84px;

    font-size:6.5px;
    line-height:1.45;

    text-align:right;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:390px){

  .status{
    max-width:115px;

    font-size:6px;
  }

  .copy-block{
    left:16px;
    right:16px;
    bottom:105px;
  }

  .brand-title{
    font-size:
      clamp(
        37px,
        11.6vw,
        50px
      );
  }

  .coming-title{
    font-size:16px;
  }

  .description{
    font-size:9.5px;
  }

  .bottom-bar{
    left:16px;
    right:16px;
  }

}


/* =========================================================
   SHORT MOBILE LANDSCAPE
========================================================= */

@media
(max-width:900px)
and (max-height:560px)
and (orientation:landscape){

  .coming-soon{
    min-height:100svh;
  }

  .site-header{
    height:54px;
  }

  .hero-content{
    padding:65px 24px 70px;
  }

  .copy-block{
    position:relative;

    left:auto;
    right:auto;
    bottom:auto;

    width:55vw;
  }

  .eyebrow{
    margin-bottom:8px;
  }

  .brand-title{
    font-size:
      clamp(
        34px,
        6.6vw,
        64px
      );
  }

  .brand-line-two{
    margin-top:7px;
  }

  .coming-title{
    margin-top:13px;

    font-size:
      clamp(
        15px,
        2.6vw,
        24px
      );
  }

  .hero-footer-copy{
    display:grid;

    grid-template-columns:
      .8fr 1.2fr;

    gap:18px;

    margin-top:15px;
    padding-top:10px;
  }

  .lead{
    font-size:8px;
  }

  .description{
    margin:0;

    font-size:8.5px;
    line-height:1.45;
  }

  .bottom-bar{
    bottom:12px;
  }

  .orbit{
    left:70%;
    top:48%;
  }

}


/* =========================================================
   DYNAMIC VIEWPORT
========================================================= */

@supports (height:100dvh){
  .coming-soon{
    height:100dvh;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */


@media (prefers-reduced-motion:reduce){

  .char{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }

  .hero-footer-copy{
    clip-path:none !important;
  }

  .brand-title::after,
  .brand-line-two::after{
    display:none !important;
  }

}

@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }

}