@font-face {
  font-family: Orbitron;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/orbitron-latin.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  font-synthesis: none;
  --bg: #06080f;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --cyan: #00d4ff;
  --violet: #7c3aed;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
::selection { color: #fff; background: #6436b7; }

.cosmos { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.nebula { position: absolute; width: 60vw; height: 68vw; border-radius: 50%; filter: blur(12px); opacity: .7; }
.nebula-cyan { left: -25%; top: -10%; background: radial-gradient(ellipse, rgba(0, 212, 255, .1), transparent 65%); animation: nebula-drift 20s ease-in-out infinite alternate; }
.nebula-violet { right: -19%; top: -24%; background: radial-gradient(ellipse, rgba(124, 58, 237, .16), transparent 66%); animation: nebula-drift 24s ease-in-out infinite alternate-reverse; }
.starfield {
  position: absolute;
  inset: -40px;
  opacity: .42;
  background-image: radial-gradient(1px 1px at 23px 41px, #83b7ca 70%, transparent), radial-gradient(1px 1px at 95px 119px, #69759d 70%, transparent), radial-gradient(1px 1px at 61px 83px, #00badf 70%, transparent);
  background-size: 217px 191px, 287px 263px, 379px 317px;
  animation: star-drift 36s linear infinite alternate;
}
.space-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(96, 133, 169, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 133, 169, .07) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 48% 48%, #000, transparent 72%); }

.page-shell { width: min(1160px, calc(100% - 80px)); min-height: 100svh; margin: auto; display: flex; flex-direction: column; }
.site-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(126, 151, 183, .09); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: Orbitron, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: .015em; }
.wordmark span { background: linear-gradient(105deg, var(--cyan), #a777ff); background-clip: text; -webkit-text-fill-color: transparent; }
.brand-symbol { width: 30px; height: 30px; fill: none; stroke: var(--cyan); stroke-width: 1.4; }
.brand-symbol path + path { fill: var(--cyan); stroke: none; }
.header-links { display: flex; align-items: center; gap: 28px; }
.header-links a { color: #a0aabe; font-size: 12px; transition: color .2s; }
.header-links a:hover, .site-footer a:hover { color: var(--cyan); }
.header-links a span { margin-left: 7px; color: var(--cyan); }
.region-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(0, 212, 255, .18); padding: 8px 11px; border-radius: 5px; color: #9bc9d4; font-size: 9px; font-weight: 600; letter-spacing: .12em; }
.status-dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

.registration-layout { flex: 1; display: grid; grid-template-columns: 1fr 430px; align-items: center; gap: 80px; padding: 28px 0; }
.hero { position: relative; padding: 36px 0 38px; isolation: isolate; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 23px; color: #79c1d0; font-size: 9px; font-weight: 600; letter-spacing: .2em; }
.eyebrow span { display: inline-block; width: 23px; height: 1px; background: var(--cyan); box-shadow: 0 0 10px rgba(0, 212, 255, .65); }
.hero h1 { margin: 0; font-family: Orbitron, sans-serif; font-size: clamp(56px, 6.1vw, 82px); font-weight: 900; line-height: 1.1; letter-spacing: -.035em; }
.hero h1 > span { background: linear-gradient(110deg, #7c3aed 5%, #ad82fa 92%); background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 30px rgba(124, 58, 237, .2)); }
.hero-tagline { margin: 27px 0 9px; color: #d1dbe9; font-size: clamp(17px, 1.8vw, 22px); font-weight: 500; letter-spacing: -.025em; }
.hero-description { max-width: 350px; margin: 0; color: #8f9eb3; font-size: 13px; line-height: 1.85; }
.text-link { display: inline-flex; align-items: center; gap: 15px; margin-top: 19px; color: #b7c5d9; font-size: 12px; }
.text-link span { color: var(--cyan); font-size: 18px; transition: transform .2s; }
.text-link:hover span { transform: translateX(4px); }
.hero-status { display: flex; align-items: center; gap: 8px; width: fit-content; margin-top: 30px; padding: 7px 10px; border: 1px solid rgba(245, 158, 11, .16); border-radius: 4px; background: rgba(245, 158, 11, .035); color: #d7a94c; font-size: 8px; letter-spacing: .14em; }
.flight-path { display: flex; align-items: center; gap: 13px; max-width: 360px; margin-top: 44px; color: #8190a7; font-size: 8px; letter-spacing: .14em; }
.flight-path b { margin-right: 6px; color: #42b5d0; font-weight: 500; }
.flight-path i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0, 212, 255, .22), rgba(124, 58, 237, .15)); }
.orbital-system { position: absolute; z-index: -1; width: 540px; height: 540px; left: -91px; top: -31px; opacity: .8; pointer-events: none; }
.orbit { position: absolute; border-radius: 50%; }
.orbit-outer { inset: 0; border: 1px solid rgba(0, 212, 255, .075); transform: rotate(-27deg) scaleY(.78); }
.orbit-inner { inset: 49px; border: 1px dashed rgba(117, 100, 183, .13); transform: rotate(27deg) scaleY(.85); }
.orbit-core { position: absolute; inset: 97px; border-radius: 50%; background: radial-gradient(ellipse at 45% 44%, rgba(0, 212, 255, .035), rgba(72, 36, 137, .04) 45%, transparent 70%); }
.orbital-point { position: absolute; top: 137px; right: 30px; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 17px rgba(0, 212, 255, .8); }

.registration-card { position: relative; overflow: hidden; padding: 28px 29px 23px; border: 1px solid rgba(121, 151, 190, .21); border-radius: 14px; background: linear-gradient(135deg, rgba(18, 27, 42, .87), rgba(11, 15, 27, .94)); box-shadow: 0 22px 80px rgba(0, 0, 0, .3), 0 0 65px rgba(31, 111, 151, .045); backdrop-filter: blur(18px); }
.registration-card::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 212, 255, .6), rgba(124, 58, 237, .5), transparent); }
.registration-card::after { content: ''; position: absolute; right: 15px; bottom: 15px; width: 15px; height: 15px; border-right: 1px solid rgba(0, 212, 255, .3); border-bottom: 1px solid rgba(0, 212, 255, .3); pointer-events: none; }
.card-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; color: #54b4cb; font-size: 8px; font-weight: 600; letter-spacing: .2em; }
.card-sector { color: #8b85b3; font-family: Orbitron, sans-serif; font-size: 8px; letter-spacing: .08em; }
.registration-card h2 { margin: 0; color: #edf3fc; font-size: 23px; line-height: 1.35; font-weight: 650; letter-spacing: -.04em; }
.subtitle { margin: 7px 0 23px; color: #94a3b8; font-size: 12px; line-height: 1.6; }
form { display: grid; }
label { margin: 0 0 7px; color: #b5c2d4; font-size: 11px; font-weight: 500; }
.input-wrap { position: relative; margin-bottom: 15px; }
.input-wrap input[type="email"], .input-wrap input[name="emailCode"] { padding-left: 13px; }
.secondary-button { margin: 12px 0 15px; background: transparent; color: #b7e9f6; border: 1px solid #356577; box-shadow: none; }
.account-link { margin: 16px 0 0; text-align: center; color: #94a3b8; font-size: 11px; }
.account-link a { color: #4ed9eb; }
.plain-input { padding-left: 13px; margin-bottom: 14px; }
.is-hidden { display: none !important; }
.account-card { max-width: 480px; width: 100%; margin: 40px auto; }
.account-card .cf-slot { margin: 10px 0 16px; }
.account-card .text-link { display: inline-block; margin-top: 15px; }
.account-card .message { margin: 8px 0; }
.input-wrap > svg { position: absolute; top: 13px; left: 13px; width: 17px; height: 17px; stroke: #647b96; stroke-width: 1.5; fill: none; pointer-events: none; transition: stroke .2s; }
.input-wrap:focus-within > svg { stroke: var(--cyan); }
input { display: block; width: 100%; height: 44px; padding: 0 12px 0 41px; border: 1px solid rgba(121, 149, 183, .2); border-radius: 6px; outline: none; color: #e2e8f0; background: rgba(4, 8, 17, .52); font-size: 12px; line-height: normal; transition: border-color .2s, box-shadow .2s, background .2s; }
input::placeholder { color: #687d98; opacity: 1; }
input:hover { border-color: rgba(121, 149, 183, .36); }
input:focus { border-color: rgba(0, 212, 255, .72); background: rgba(4, 12, 23, .8); box-shadow: 0 0 0 3px rgba(0, 212, 255, .075); }
input:-webkit-autofill { -webkit-text-fill-color: #e2e8f0; -webkit-box-shadow: 0 0 0 100px #101b2a inset; caret-color: #e2e8f0; }
.message { min-height: 17px; margin: 0 0 12px; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.message.error { color: #ff9eaf; }
.message.success { color: #7ce9bc; }
.message.idle { color: transparent; }
button { min-height: 46px; width: 100%; padding: 10px 18px; border: 1px solid #00d4ff; border-radius: 6px; color: #02131c; background: linear-gradient(110deg, #00c8f3, #39dce8); box-shadow: 0 0 24px rgba(0, 212, 255, .12), inset 0 1px rgba(255, 255, 255, .16); font-size: 12px; font-weight: 750; letter-spacing: .035em; cursor: pointer; transition: box-shadow .2s, transform .2s, filter .2s; }
button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 32px rgba(0, 212, 255, .27); }
button:active:not(:disabled) { transform: translateY(0); }
button:disabled { cursor: wait; opacity: .58; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.security-note { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 17px 0 7px; color: #8a9db5; font-size: 9px; }
.security-note svg { width: 12px; height: 12px; fill: none; stroke: #6ca7b0; stroke-width: 1.5; }
.test-note { max-width: 290px; margin: 0 auto; color: #8898ae; text-align: center; font-size: 10px; line-height: 1.6; }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 46px; padding: 12px 0; border-top: 1px solid rgba(126, 151, 183, .09); color: #7d8ba3; font-size: 8px; letter-spacing: .07em; }
.footer-divider { color: #3c6078; padding: 0 9px; }
.site-footer a { transition: color .2s; }

@keyframes nebula-drift { to { transform: translate3d(3vw, 2vw, 0) scale(1.06); } }
@keyframes star-drift { to { transform: translate3d(-13px, 16px, 0); opacity: .58; } }

@media (max-width: 1100px) {
  .page-shell { width: calc(100% - 56px); }
  .registration-layout { gap: 40px; grid-template-columns: minmax(0, 1fr) 400px; }
  .hero h1 { font-size: clamp(48px, 6.2vw, 70px); }
  .eyebrow { font-size: 8px; letter-spacing: .12em; }
  .flight-path { gap: 8px; font-size: 7px; }
  .orbital-system { left: -130px; opacity: .6; }
}

@media (min-width: 801px) and (max-height: 800px) {
  .site-header { min-height: 64px; }
  .registration-layout { padding: 18px 0; }
  .registration-card { padding: 22px 28px 20px; }
  .card-topline { margin-bottom: 12px; }
  .subtitle { margin-bottom: 17px; }
  .input-wrap { margin-bottom: 12px; }
  .security-note { margin-top: 14px; }
  .hero { padding-top: 22px; padding-bottom: 22px; }
  .site-footer { min-height: 40px; }
}

@media (max-width: 800px) {
  .page-shell { width: min(480px, calc(100% - 36px)); }
  .site-header { min-height: 74px; }
  .wordmark { gap: 7px; font-size: 14px; }
  .brand-symbol { width: 23px; height: 23px; }
  .header-links { gap: 0; }
  .header-links > a { display: none; }
  .region-badge { padding: 7px 8px; font-size: 7px; }
  .registration-layout { display: block; padding: 26px 0 28px; }
  .hero { padding: 0 0 26px; text-align: center; }
  .eyebrow, .hero-description, .text-link, .flight-path, .hero-status, .orbital-system { display: none; }
  .hero h1 { font-size: clamp(29px, 7.9vw, 43px); line-height: 1.15; white-space: nowrap; }
  .hero h1 br { display: none; }
  .hero h1 > span::before { content: ' '; }
  .hero-tagline { margin: 9px 0 0; font-size: 12px; color: #93a1b7; }
  .registration-card { padding: 25px 23px 21px; }
  .registration-card h2 { font-size: 23px; }
  .subtitle { margin-bottom: 22px; }
  .nebula { width: 130vw; height: 160vw; }
  .nebula-cyan { left: -70%; top: 0; }
  .nebula-violet { right: -70%; top: 5%; }
  .site-footer { align-items: flex-start; padding: 15px 0 20px; font-size: 7px; letter-spacing: 0; }
  .site-footer > span { max-width: 235px; line-height: 1.8; }
  .footer-divider { padding: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}