@font-face {
  font-family:Jakarta;
  src:url('/assets/jakarta.woff2') format('woff2');
  font-weight:200 800;
  font-display:swap
}
@font-face {
  font-family:Sora;
  src:url('/assets/sora.woff2') format('woff2');
  font-weight:100 800;
  font-display:swap
}
@font-face {
  font-family:JetBrains;
  src:url('/assets/jetbrains.woff2') format('woff2');
  font-weight:100 800;
  font-display:swap
}
:root {
  color-scheme:dark;
  --ink:#060c18;
  --surface:#0c1424;
  --brand:#4d8bff;
  --soft:#9dc0ff;
  --gold:#f0b429;
  --muted:#96a3ba;
  --line:rgba(157,192,255,.13)
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--ink);
  color:#f4f7ff;
  font-family:Jakarta,Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible {
  outline:2px solid var(--soft);
  outline-offset:6px
}
::selection {
  background:var(--brand);
  color:#fff
}
.page-shell {
  max-width:1440px;
  padding:0 64px;
  margin:auto;
  position:relative
}
.ambient {
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 80% 35%,#112c5a55,transparent 52%),radial-gradient(ellipse at 5% 0%,#18366130,transparent 40%)
}
.header {
  height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand {
  display:inline-flex
}
.brand img {
  width:154px;
  height:40px;
  object-fit:contain
}
.header-right {
  display:flex;
  gap:38px;
  align-items:center;
  font-size:12px
}
.status {
  display:flex;
  align-items:center;
  gap:9px;
  color:#c6d0e2;
  border:1px solid var(--line);
  padding:9px 14px;
  border-radius:30px;
  background:#ffffff03
}
.status-dot {
  height:6px;
  width:6px;
  background:var(--gold);
  border-radius:50%;
  box-shadow:0 0 12px #f0b42950
}
.header-support {
  color:var(--muted)
}
.header-support span {
  margin-left:7px;
  color:#fff
}
.hero {
  display:grid;
  grid-template-columns:1.13fr 1fr;
  align-items:center;
  min-height:655px;
  padding:48px 0 52px;
  gap:6px
}
.hero-copy {
  position:relative;
  z-index:2
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font:10px JetBrains,monospace;
  letter-spacing:1.7px;
  color:var(--soft);
  margin-bottom:26px
}
.tiny-spark {
  font-size:19px
}
h1 {
  font:600 clamp(54px,6.1vw,88px)/1.12 Sora,sans-serif;
  letter-spacing:-5px;
  margin:0 0 28px;
  position:relative;
  white-space:nowrap
}
h1>span:first-of-type {
  color:var(--brand)
}
.heading-dot {
  display:inline-block;
  font-size:30px;
  vertical-align:top;
  line-height:1.4;
  color:var(--gold);
  margin-left:13px;
  transform:rotate(12deg)
}
.intro {
  font-size:17px;
  font-weight:600;
  letter-spacing:-.3px;
  margin:0 0 12px
}
.description {
  font-size:14px;
  line-height:1.95;
  color:var(--muted);
  margin:0
}
.actions {
  display:flex;
  gap:12px;
  margin-top:32px
}
.button {
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 20px;
  font-size:12px;
  font-weight:700;
  border-radius:8px;
  transition:transform .2s,background .2s,box-shadow .2s
}
.button:hover {
  transform:translateY(-3px)
}
.button svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.button-primary {
  background:var(--brand);
  color:#06132e;
  box-shadow:0 4px 25px #4d8bff24;
  border:1px solid #77a7ff
}
.button-primary:hover {
  background:#77a7ff;
  box-shadow:0 6px 30px #4d8bff40
}
.button-primary svg {
  fill:currentColor;
  stroke:none;
  width:16px
}
.arrow {
  font-size:19px;
  margin-left:13px
}
.button-secondary {
  border:1px solid #91b1e02b;
  background:#ffffff03;
  color:#d0d9e9
}
.button-secondary:hover {
  background:#ffffff0a
}
.follow-note {
  font-size:10px;
  color:#8291aa;
  margin:15px 0 0
}
.follow-note span {
  margin-left:6px
}
.visual {
  height:520px;
  position:relative;
  isolation:isolate
}
.visual-grid {
  position:absolute;
  inset:-10px -25px;
  background-image:linear-gradient(#659bff09 1px,transparent 1px),linear-gradient(90deg,#659bff09 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse,#000 12%,transparent 70%)
}
.visual:before {
  content:'';
  position:absolute;
  inset:5%;
  background:radial-gradient(ellipse,#2465db25,transparent 65%);
  filter:blur(20px)
}
.orbit {
  position:absolute;
  border:1px solid #71a8ff19;
  border-radius:50%;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%)
}
.orbit-outer {
  width:440px;
  height:440px;
  animation:orbit 70s linear infinite
}
.orbit-outer:after,.orbit-outer i {
  content:'';
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 18px #4d8bff;
  left:64px;
  top:64px
}
.orbit-outer i {
  top:auto;
  left:auto;
  right:63px;
  bottom:63px;
  background:var(--gold);
  width:4px;
  height:4px
}
.orbit-middle {
  width:350px;
  height:350px;
  border-style:dashed;
  border-color:#71a8ff1c;
  animation:orbit 100s linear infinite reverse
}
.orbit-inner {
  width:270px;
  height:270px;
  border-color:#71a8ff0d;
  background:#21487908
}
.gem-wrap {
  position:absolute;
  left:50%;
  top:44%;
  width:330px;
  height:330px;
  transform:translate(-50%,-50%);
  animation:float 6s ease-in-out infinite
}
.gem {
  width:100%;
  height:100%;
  filter:drop-shadow(0 16px 35px #1d60df45);
  transform:rotate(-9deg)
}
.platform {
  position:absolute;
  left:50%;
  top:73%;
  width:240px;
  height:45px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid #477ad140;
  background:radial-gradient(ellipse,#4d8bff20,transparent 70%);
  box-shadow:0 10px 40px #1352b21a
}
.platform:after {
  content:'';
  position:absolute;
  inset:8px 24px;
  border:1px solid #6ba9ff22;
  border-radius:50%
}
.platform span {
  position:absolute;
  bottom:20px;
  left:20%;
  width:60%;
  height:170px;
  background:linear-gradient(0deg,#4d8bff0e,transparent);
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)
}
.floating-label {
  position:absolute;
  left:50%;
  top:81%;
  transform:translateX(-50%) rotate(-5deg);
  display:flex;
  align-items:center;
  gap:14px;
  white-space:nowrap;
  padding:12px 16px;
  border-radius:7px;
  border:1px solid #78a7fa30;
  background:linear-gradient(135deg,#172841,#0b1527);
  box-shadow:0 12px 35px #0004;
  font:10px JetBrains,monospace;
  letter-spacing:1.4px;
  color:#bcd2fa
}
.pause-icon {
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  background:#4d8bff1a;
  color:var(--soft);
  border:1px solid #4d8bff30;
  border-radius:4px;
  font-size:14px
}
.label-light {
  width:5px;
  height:5px;
  background:var(--gold);
  border-radius:50%;
  margin-left:6px;
  animation:glow 3s ease-in-out infinite
}
.coordinate {
  position:absolute;
  font:8px JetBrains,monospace;
  letter-spacing:1.3px;
  color:#7d92b5
}
.coordinate-top {
  top:0;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap
}
.coordinate-bottom {
  bottom:0;
  left:12%;
  right:12%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:7px;
  letter-spacing:1px
}
.coordinate-bottom>span:nth-child(2) {
  color:var(--brand);
  font-size:16px
}
.cross {
  position:absolute;
  color:#7b99cc60;
  font:18px JetBrains,monospace
}
.cross-one {
  top:13%;
  left:12%
}
.cross-two {
  bottom:18%;
  right:8%
}
.star {
  position:absolute
}
.star-one {
  top:24%;
  right:13%;
  color:var(--gold);
  font-size:23px;
  animation:glow 4s ease-in-out infinite
}
.star-two {
  top:60%;
  left:15%;
  color:#9dc0ff;
  font-size:19px
}
.star-three {
  top:14%;
  left:41%;
  color:#9dc0ff80;
  font-size:13px
}
.maintenance-strip {
  display:flex;
  gap:26px;
  align-items:center;
  justify-content:space-between;
  padding:27px 30px;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(110deg,#10203990,#0b142580);
  position:relative
}
.maintenance-strip:before {
  content:'';
  position:absolute;
  width:75px;
  height:1px;
  top:-1px;
  left:30px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent)
}
.maintenance-title {
  display:flex;
  align-items:center;
  gap:17px;
  flex-shrink:0
}
.tool-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:#4d8bff0d;
  border:1px solid #4d8bff26;
  border-radius:10px;
  color:var(--soft)
}
.tool-icon svg {
  width:21px;
  height:21px;
  stroke:currentColor;
  stroke-width:1.35;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}
.overline {
  font:8px JetBrains,monospace;
  letter-spacing:1.4px;
  color:var(--soft)
}
h2 {
  font-size:13px;
  letter-spacing:-.2px;
  margin:7px 0 0;
  font-weight:600
}
.maintenance-strip>p {
  color:var(--muted);
  font-size:11px;
  line-height:1.9;
  margin:0
}
.contact-link {
  font-size:11px;
  white-space:nowrap;
  font-weight:600
}
.contact-link span {
  color:var(--soft);
  margin-left:14px
}
.contact-link:hover,.footer a:hover,.header-support:hover {
  color:var(--soft)
}
.footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:38px;
  min-height:78px;
  padding-bottom:16px;
  color:#8291aa;
  font-size:10px;
  gap:20px
}
.footer-divider {
  padding:0 12px;
  color:#3c4b65
}
.footer-links {
  display:flex;
  align-items:center;
  gap:24px
}
.footer-links a span {
  font-size:12px;
  margin-left:5px
}
#motion-toggle {
  border:0;
  background:none;
  color:#8291aa;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  padding:8px 0 8px 20px;
  border-left:1px solid var(--line)
}
#motion-toggle[hidden] {
  display:none
}
#motion-toggle svg {
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5
}
.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  transform:translateY(-150%);
  z-index:10;
  background:var(--brand);
  color:var(--ink);
  padding:12px;
  border-radius:6px
}
.skip-link:focus {
  transform:none
}
@keyframes float {
  0%,100% {
    transform:translate(-50%,-50%)
  }
  50% {
    transform:translate(-50%,-54%)
  }
}
@keyframes orbit {
  to {
    transform:translate(-50%,-50%) rotate(360deg)
  }
}
@keyframes glow {
  50% {
    opacity:.45
  }
}
html[data-motion="paused"] *,html[data-motion="paused"] *:before,html[data-motion="paused"] *:after {
  animation-play-state:paused!important
}
html[data-motion="paused"] .button {
  transition:none
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
@media(min-width:1500px) {
  .hero {
    min-height:calc(100svh - 340px);
    max-height:900px
  }
  .visual {
    height:570px
  }
  .orbit-outer {
    width:490px;
    height:490px
  }
  .orbit-middle {
    width:390px;
    height:390px
  }
  .gem-wrap {
    width:360px;
    height:360px
  }
}
@media(max-width:1100px) {
  .page-shell {
    padding:0 36px
  }
  .hero {
    min-height:610px
  }
  h1 {
    font-size:64px;
    letter-spacing:-3.6px
  }
  .heading-dot {
    font-size:23px;
    margin-left:7px
  }
  .visual {
    height:460px
  }
  .orbit-outer {
    width:360px;
    height:360px
  }
  .orbit-middle {
    width:290px;
    height:290px
  }
  .orbit-inner {
    width:220px;
    height:220px
  }
  .gem-wrap {
    width:285px;
    height:285px
  }
  .maintenance-strip {
    padding:24px;
    gap:20px
  }
  .maintenance-title {
    gap:12px
  }
  .maintenance-strip>p {
    max-width:220px
  }
  h2 {
    font-size:12px
  }
  .coordinate-bottom {
    left:8%;
    right:8%;
    font-size:6px
  }
}
@media(max-width:850px) {
  .header {
    height:92px
  }
  .header-support {
    display:none
  }
  .hero {
    grid-template-columns:1fr;
    text-align:center;
    padding:48px 0 30px;
    gap:36px
  }
  .eyebrow {
    justify-content:center;
    margin-bottom:22px
  }
  h1 {
    font-size:72px;
    letter-spacing:-4px
  }
  .intro {
    font-size:16px
  }
  .description {
    font-size:14px
  }
  .actions {
    justify-content:center;
    margin-top:26px
  }
  .visual {
    width:min(480px,100%);
    height:430px;
    justify-self:center
  }
  .orbit-outer {
    width:360px;
    height:360px
  }
  .coordinate-top {
    top:0
  }
  .coordinate-bottom {
    bottom:-3px;
    left:15%;
    right:15%
  }
  .gem-wrap {
    width:285px;
    height:285px
  }
  .maintenance-strip {
    flex-wrap:wrap;
    text-align:left;
    gap:20px
  }
  .maintenance-title {
    flex:1
  }
  .maintenance-strip>p {
    max-width:none;
    flex-basis:100%;
    order:3;
    padding-left:54px
  }
  .footer {
    flex-direction:column;
    gap:8px;
    margin-top:24px;
    padding:10px 0 24px
  }
  .footer p {
    margin:0
  }
  .footer-links {
    gap:24px
  }
}
@media(max-width:480px) {
  .page-shell {
    padding:0 22px
  }
  .header {
    height:82px
  }
  .brand img {
    width:125px;
    height:33px
  }
  .status {
    font-size:9px;
    padding:8px 10px;
    gap:6px
  }
  .hero {
    padding-top:42px;
    gap:34px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.3px
  }
  h1 {
    font-size:clamp(43px,12vw,57px);
    letter-spacing:-3px;
    margin-bottom:22px
  }
  .heading-dot {
    font-size:19px;
    margin-left:5px
  }
  .intro {
    font-size:12px;
    letter-spacing:0
  }
  .description {
    font-size:12px;
    line-height:1.9
  }
  .button {
    font-size:10px;
    padding:0 14px;
    gap:8px;
    min-height:49px
  }
  .arrow {
    margin-left:2px
  }
  .actions {
    gap:9px
  }
  .follow-note {
    font-size:9px
  }
  .visual {
    height:365px
  }
  .orbit-outer {
    width:300px;
    height:300px
  }
  .orbit-middle {
    width:245px;
    height:245px
  }
  .orbit-inner {
    width:190px;
    height:190px
  }
  .gem-wrap {
    width:250px;
    height:250px
  }
  .orbit-outer:after {
    top:41px;
    left:41px
  }
  .orbit-outer i {
    bottom:41px;
    right:41px
  }
  .platform {
    width:190px;
    height:32px;
    top:75%
  }
  .floating-label {
    top:82%;
    padding:9px 12px;
    font-size:8px;
    gap:10px
  }
  .coordinate-top {
    font-size:7px
  }
  .coordinate-bottom {
    left:7%;
    right:7%;
    font-size:6px
  }
  .cross-one {
    left:3%
  }
  .cross-two {
    right:2%
  }
  .star-one {
    right:7%
  }
  .star-two {
    left:6%
  }
  .maintenance-strip {
    padding:22px 18px;
    gap:18px
  }
  .maintenance-title {
    flex-basis:100%
  }
  .overline {
    font-size:7px
  }
  h2 {
    font-size:12px
  }
  .maintenance-strip>p {
    order:initial;
    padding:0;
    font-size:11px
  }
  .contact-link {
    padding-left:0;
    font-size:11px
  }
  .footer {
    font-size:9px
  }
  .footer-divider {
    padding:0 5px
  }
  .footer-links {
    gap:18px
  }
  #motion-toggle {
    padding-left:14px;
    font-size:9px
  }
}