/* ==========================================================
   FULLSCREEN HOME LANDING
   ========================================================== */

.hero.hero-landing{
  position:relative;
  isolation:isolate;
  overflow:visible;

  min-height:calc(100vh - 92px);
  box-sizing:border-box;

  width:100dvw;
  max-width:none;

  margin-left:calc(50% - 50dvw);
  margin-right:calc(50% - 50dvw);
  margin-top:-48px;

  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:74px 32px 62px;

  border:0 !important;
  background:var(--bg);
}


/* perspective grid */
.hero.hero-landing::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  bottom:-180px;

  background:
    radial-gradient(circle at 50% 42%,
      rgba(0,229,255,.055) 0%,
      rgba(0,229,255,.018) 28%,
      transparent 58%
    ),

    linear-gradient(
      115deg,
      transparent 0%,
      transparent 23%,
      rgba(120,150,175,.035) 23.15%,
      transparent 23.3%,
      transparent 42%,
      rgba(0,229,255,.028) 42.15%,
      transparent 42.3%,
      transparent 68%,
      rgba(120,150,175,.025) 68.15%,
      transparent 68.3%
    ),

    radial-gradient(circle at 18% 28%,
      rgba(255,255,255,.045) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(circle at 76% 34%,
      rgba(0,229,255,.07) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(circle at 63% 72%,
      rgba(255,255,255,.035) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(circle at 31% 67%,
      rgba(0,229,255,.045) 0 1px,
      transparent 1.5px
    );

  opacity:.95;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 12%,
      #000 72%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 12%,
      #000 72%,
      transparent 100%
    );
  pointer-events:none;
}


.hero.hero-landing::after{
  content:"";
  position:absolute;
  z-index:-1;

  inset:0;
  bottom:-180px;

  background:
    radial-gradient(
      ellipse at 50% 42%,
      transparent 0%,
      transparent 34%,
      rgba(7,10,14,.10) 54%,
      rgba(7,10,14,.32) 72%,
      rgba(7,10,14,.70) 100%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 62%,
      rgba(0,0,0,.90) 72%,
      rgba(0,0,0,.55) 84%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 62%,
      rgba(0,0,0,.90) 72%,
      rgba(0,0,0,.55) 84%,
      transparent 100%
    );

  pointer-events:none;
}


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

.home-landing-content{
  position:relative;
  z-index:2;

  width:100%;
  max-width:940px;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}


.home-landing-eyebrow{
  margin-bottom:18px;

  font-family:'Inter',system-ui,sans-serif;
  font-size:10px;
  line-height:1;
  font-weight:700;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:#8294a7;
}


.home-landing-eyebrow .open{
  color:var(--green);
}


.home-landing-title{
  margin:0;

  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(54px,6.2vw,92px);
  line-height:.98;
  font-weight:800;

  letter-spacing:-.045em;

  color:#f1f3f5;

  text-shadow:
    0 1px 0 rgba(255,255,255,.28),
    0 14px 38px rgba(0,0,0,.38);
}


.home-landing-kicker{
  margin-top:17px;

  font-family:'Inter',system-ui,sans-serif;
  font-size:13px;
  font-weight:600;

  letter-spacing:.08em;

  color:#8da5bd;
}


.home-landing-desc{
  max-width:780px;

  margin:20px auto 0;

  font-family:'Inter',system-ui,sans-serif;
  font-size:15px;
  line-height:1.8;
  font-weight:400;

  color:#a7b4c1;
}


/* ==========================================================
   MODES
   ========================================================== */

.home-landing-modes{
  margin-top:22px;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;

  gap:7px;
}


.home-landing-mode{
  display:inline-flex;
  align-items:center;

  gap:6px;

  padding:5px 9px;

  border:1px solid rgba(130,150,170,.16);
  border-radius:999px;

  background:rgba(13,18,24,.74);

  font-family:'Inter',system-ui,sans-serif;
  font-size:8px;
  line-height:1;
  font-weight:700;

  letter-spacing:.09em;
  text-transform:uppercase;

  color:#aab8c6;

  backdrop-filter:blur(5px);
}


.home-landing-mode-dot{
  width:5px;
  height:5px;

  border-radius:50%;

  flex:none;
}


/* ==========================================================
   IP COPY PILL
   ========================================================== */

.home-server-copy{
  margin-top:31px;

  min-height:40px;

  display:inline-flex;
  align-items:center;

  gap:10px;

  padding:0 15px;

  border:1px solid rgba(145,165,185,.20);
  border-radius:999px;

  background:rgba(18,22,28,.88);

  box-shadow:
    0 10px 30px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.025);

  color:#bec9d5;

  cursor:pointer;

  transition:
    border-color .15s ease,
    background .15s ease;

  backdrop-filter:blur(7px);
}


.home-server-copy:hover{
  border-color:rgba(0,229,255,.35);
  background:rgba(23,29,36,.94);
}


.home-server-copy:active{
  border-color:rgba(0,229,255,.48);
  background:rgba(25,32,40,.96);
}


.home-server-copy-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--green);

  box-shadow:0 0 10px rgba(34,197,94,.60);

  flex:none;
}


.home-server-copy-prefix{
  font-family:'Share Tech Mono',monospace;
  font-size:12px;

  color:#718195;
}


.home-server-copy-address{
  font-family:'Share Tech Mono',monospace;
  font-size:13px;

  color:#d7dee6;

  letter-spacing:.02em;
}


.home-server-copy-icon{
  width:14px;
  height:14px;

  margin-left:1px;

  color:#718195;

  flex:none;
}


.home-server-copy-hint{
  margin-top:8px;

  font-family:'Inter',system-ui,sans-serif;
  font-size:9px;

  letter-spacing:.06em;

  color:#586878;
}


.home-landing-live-link{
  margin-top:16px;

  border:0;
  background:none;

  font-family:'Inter',system-ui,sans-serif;
  font-size:10px;
  font-weight:600;

  letter-spacing:.10em;
  text-transform:uppercase;

  color:#788b9d;

  cursor:pointer;

  transition:color .15s ease;
}


.home-landing-live-link:hover{
  color:var(--accent);
}


/* ==========================================================
   LIVE SERVER INFO
   ========================================================== */

.home-landing-telemetry{
  margin-top:44px;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;

  gap:34px;

  background:transparent;
}


.home-landing-data{
  min-width:auto;

  padding:7px 0;

  display:flex;
  flex-direction:column;

  gap:5px;

  border:0;
  background:transparent;
}





.home-landing-data-label{
  font-family:'Inter',system-ui,sans-serif;
  font-size:8px;
  line-height:1;

  font-weight:700;

  letter-spacing:.12em;
  text-transform:uppercase;

  color:#526273;
}


.home-landing-data-value{
  font-family:'Inter',system-ui,sans-serif;
  font-size:11px;
  line-height:1.25;

  font-weight:600;

  color:#aebdca;

  white-space:nowrap;
}


.home-landing-status{
  display:flex;
  align-items:center;

  gap:6px;
}


#home-status-dot{
  width:6px;
  height:6px;

  border-radius:50%;

  display:inline-block;
  flex:none;
}


/* JS still knows this element, but landing does not need thumbnail */
#home-map-thumb{
  display:none !important;
}


/* ==========================================================
   COPY TOAST
   ========================================================== */

#home-copy-toast{
  position:fixed;

  left:18px;
  bottom:18px;

  z-index:9999;

  display:flex;
  align-items:center;

  gap:9px;

  padding:10px 13px;

  border:1px solid rgba(125,150,175,.18);
  border-radius:999px;

  background:rgba(17,22,28,.96);

  box-shadow:0 12px 35px rgba(0,0,0,.38);

  font-family:'Share Tech Mono',monospace;
  font-size:12px;

  color:#c5d0db;

  opacity:0;

  transform:translateY(8px);

  pointer-events:none;

  transition:
    opacity .18s ease,
    transform .18s ease;
}


#home-copy-toast.show{
  opacity:1;
  transform:translateY(0);
}


.home-copy-toast-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--green);

  box-shadow:0 0 8px rgba(34,197,94,.55);
}


.home-copy-toast-check{
  color:var(--green);
}


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

@media(max-width:700px){

  .hero.hero-landing{
    min-height:calc(100vh - 92px);
    margin-top:0;
    padding:58px 18px 48px;
  }

  .home-landing-title{
    font-size:clamp(46px,14vw,68px);
  }

  .home-landing-desc{
    font-size:13px;
    line-height:1.7;
  }

  .home-landing-telemetry{
    width:100%;
    max-width:420px;
  }

  .home-landing-data{
    min-width:auto;
    box-sizing:border-box;
    border:0;
  }

  .home-server-copy{
    max-width:100%;
  }

  .home-server-copy-prefix{
    display:none;
  }

}