/* ALTAIC coming soon — brand only: one navy stage, the dotted mark, logo, "Coming soon", slogan, contact; the users' sign-in top right. */
@font-face{font-family:Jost;src:url(fonts/jost-var.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-var.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope-var.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --navy:#0B1117;--navy-2:#101820;--gold:#C9A227;--gold-hi:#E0B834;--mist:#C9CED3;--cloud:#E6E9ED;--steel:#8A949D;
  --display:Jost,Inter,ui-sans-serif,system-ui,sans-serif;--body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(20px,4vw,56px);--ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark
}
html[lang="mn"]{--display:Manrope,Inter,ui-sans-serif,system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--navy);color:var(--cloud);font:400 15px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:9;background:var(--gold);color:var(--navy);padding:10px 16px;border-radius:999px}

/* the stage fills the screen (dynamic viewport on phones); the mark canvas covers it */
.stage{position:relative;min-height:100vh;min-height:100svh;height:100svh;display:grid;grid-template-rows:auto 1fr auto;
  padding:max(var(--gut),env(safe-area-inset-top)) var(--gut) max(calc(var(--gut) * .8),env(safe-area-inset-bottom));isolation:isolate;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 38%,#15202B 0%,var(--navy-2) 45%,var(--navy) 100%)}
.stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 42%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 60% at 50% 42%,#000 30%,transparent 100%)}
.glow{position:absolute;left:50%;top:42%;width:min(70vw,760px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(201,162,39,.16),rgba(201,162,39,.05) 55%,transparent);filter:blur(10px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6;transform:translate(-50%,-50%) scale(1.06)}}
canvas.mark{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}

/* top: logo · language · sign-in */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center;gap:14px;color:#fff}
.logo svg{width:34px;height:auto;display:block}
.logo .sep{width:1px;height:22px;background:rgba(255,255,255,.22)}
.logo .wm{font:500 15px/1 Jost,var(--body);letter-spacing:.42em;margin-right:-.42em}
.lang{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.lang a{display:inline-grid;place-items:center;min-width:42px;height:32px;padding:0 10px;border-radius:999px;text-decoration:none;
  font:600 12px/1 Jost,var(--body);letter-spacing:.12em;color:var(--mist);transition:background .3s var(--ease),color .3s}
.lang a:hover{color:#fff}
.lang a[aria-current]{background:var(--gold);color:var(--navy)}
/* the users' sign-in (os.altaic.asia): a quiet pill as tall as the language switch; gold stays on the chosen language */
.acts{display:flex;align-items:center;gap:10px;min-width:0}
.signin{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 18px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font:600 13.5px/1 var(--display);letter-spacing:.01em;color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
  transition:background .3s var(--ease),box-shadow .3s}
.signin svg{width:14px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.signin:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--gold)}
.signin:hover svg{transform:translateX(2px)}

/* the holding line sits under the mark */
.hold{align-self:end;justify-self:center;text-align:center;padding-bottom:clamp(20px,6vh,72px);max-width:900px}
.soon{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;padding:9px 16px 9px 14px;border-radius:999px;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:500 12.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mist);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.soon i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.soon i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--gold);opacity:0;animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2);opacity:0}}
.soon b{font:600 12.5px/1 Jost,var(--body);letter-spacing:.16em;color:#fff;padding-left:12px;border-left:1px solid rgba(255,255,255,.18)}
h1{margin:0;font:500 clamp(30px,4.6vw,60px)/1.08 var(--display);letter-spacing:-.02em;color:#fff;text-wrap:balance}
h1 .muted{color:rgba(201,206,211,.55)}
h1 .gold{color:var(--gold)}

/* bottom: contact */
.bot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-size:13px;color:var(--steel)}
.bot a{color:var(--mist);text-decoration:none;border-bottom:1px solid rgba(201,206,211,.25);transition:color .3s,border-color .3s}
.bot a:hover{color:#fff;border-color:var(--gold)}

/* entrance */
.js .top,.js .hold,.js .bot{animation:rise 1.1s var(--ease) both}
.js .hold{animation-delay:.5s}.js .bot{animation-delay:.8s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.glow,.soon i::after,.js .top,.js .hold,.js .bot{animation:none}}

@media (max-width:620px){
  .logo svg{width:30px}.logo .wm{font-size:14px;letter-spacing:.36em}
  .soon{font-size:11.5px;letter-spacing:.14em;margin-bottom:18px}
  .bot{flex-direction:column;align-items:center;gap:6px}
  .acts{gap:8px}.signin{padding:0 14px}.signin svg{display:none}
}
@media (max-width:400px){
  .lang a{min-width:36px;padding:0 8px}.signin{padding:0 12px;font-size:13px}
}
@media (max-width:359px){                                 /* the smallest phones only: the logo steps in a little so the header fits */
  .top{gap:10px}.logo{gap:10px}.logo .wm{letter-spacing:.3em;margin-right:-.3em}
}
@media (max-height:520px) and (orientation:landscape){
  body{overflow:auto}.stage{height:auto;min-height:100svh}
  .hold{padding-bottom:12px}
}