:root{
  --x-black:#0c0c0c;
  --x-white:#fff;
  --x-line:#e8e8e8;
  --x-blue:#2f66ff;
  --x-pad:clamp(18px,3vw,48px);
}
*{box-sizing:border-box}
html{background:#fff;color:var(--x-black);font-family:Arial,Helvetica,sans-serif}
body{margin:0;background:#fff;color:var(--x-black);overflow-x:hidden}
a{color:inherit}
.x-header{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  height:78px;padding:0 var(--x-pad);
  display:flex;align-items:center;justify-content:space-between;
  pointer-events:none;
}
.x-header__brand,.x-header__menu{pointer-events:auto}
.x-header__brand{
  text-decoration:none;font-size:18px;font-weight:700;letter-spacing:.14em;
}
.x-header__menu{
  width:92px;height:44px;border:1px solid #d9d9d9;border-radius:999px;
  background:rgba(255,255,255,.88);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.x-header__menu:hover{transform:scale(1.04)}
.x-header__menu span{display:block;width:5px;height:5px;border-radius:50%;background:currentColor}
.x-header__menu b{font-size:12px;font-weight:600;margin-left:3px}
.x-nav{
  position:fixed;inset:0;pointer-events:none;background:rgba(0,0,0,.12);
  opacity:0;transition:opacity .35s ease;
}
.x-nav__panel{
  position:absolute;top:12px;right:12px;bottom:12px;
  width:min(620px,calc(100vw - 24px));background:#fff;border-radius:24px;
  padding:24px clamp(24px,5vw,56px);display:flex;flex-direction:column;
  transform:translateX(105%);transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.x-nav.is-open{opacity:1;pointer-events:auto}
.x-nav.is-open .x-nav__panel{transform:none}
.x-nav__top,.x-nav__bottom{display:flex;justify-content:space-between;gap:20px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#737373}
.x-nav__close{border:0;background:none;font:inherit;cursor:pointer;color:inherit}
.x-nav__links{display:grid;gap:0;margin:auto 0}
.x-nav__links a{
  text-decoration:none;font-size:clamp(42px,7vw,84px);line-height:.95;
  letter-spacing:-.05em;padding:10px 0;display:flex;align-items:flex-start;gap:18px;
  transition:transform .25s ease,opacity .25s ease;
}
.x-nav__links a:hover{transform:translateX(8px)}
.x-nav__links a span{font-size:11px;letter-spacing:.08em;color:#949494;margin-top:8px}
.x-nav__links a.is-active::after{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--x-blue);
  margin:auto 0 auto 10px;
}
body.nav-open{overflow:hidden}
@media(max-width:700px){
  .x-header{height:68px}
  .x-header__menu{width:82px;height:40px}
  .x-nav__panel{top:8px;right:8px;bottom:8px;width:calc(100vw - 16px);border-radius:20px;padding:22px}
  .x-nav__links a{font-size:clamp(40px,14vw,64px)}
}